<template>
  <div @click="otherClick" :class="{'theme-market': showMarketingTime}">
    <section v-if="dataInfo && dataInfo != ''" id="coverWrap" :class="cfg && cfg.enableAudioPlayerTop == 1 ? 'c-pf c-pz9 c-w100 c-maxw640' : 'c-p'">
      <div class="c-w100 c-hh452 c-text-hidden c-p c-bg-white">
        <div class="c-pa c-p-l24 c-p-t24 c-pz99" v-if="enableBuyedInfoSwiper==1&&dataInfo.payType==2&&swiperList.length>2">
          <buy-inforswiper :swiperList='swiperList'></buy-inforswiper>
        </div>
        <audio-com v-if="dataInfo" ref="audioCom" class="c-pa c-p-b32 c-p-l0 c-w100 c-pz98" :cover="dataInfo.courseAvatar" :isNew="true" :payType="dataInfo.payType" :currentIndex="currentIndex" :appAudioInfo="appAudioInfo" :appNeedPlayThis="appNeedPlayThis" :playType="playType" :bindPhoneSetting="bindPhoneSetting"
          :isNeedFirstPlay="isSelectedVoice" :isCourseChange="isCourseChange" :watchTime="dataInfo.items && dataInfo.items[currentIndex] && dataInfo.items[currentIndex].watchTime * 60 + (dataInfo.items[currentIndex].watchTimeSeconds ? dataInfo.items[currentIndex].watchTimeSeconds : 0)" :audioAndSrc="audioMp3Src" :audioTitle="audioTitle"
          :audioIOSSrc="audioM3u8Src" :speedPlay="dataInfo.speedPlay==-1?(cfg && cfg.speedPlay == 0? false : true):(dataInfo.speedPlay==2?false:true)" :hasPermission="dataInfo.hasPermission" :showPlayBack="showPlayBack" :hasAuditionPermission="hasAuditionPermission" :miniQr="miniQr" :isSaleOnly="dataInfo.isSaleOnly"
          :canNotPlay="isOffSale || hasExpired || timingPutOn || isUserGroup || isStoreUserGroup" :isSubscribe="dataInfo.isSubscribe"
          @clickNoPermission="clickNoPermission" @audioCanplay="audioCanplay" @startPlay='startPlay' @onPlayTimeChange="onPlayTimeChange" :totalPlayedTime="longestTime" :curPlayTime="audioPlayTime"
          :isAllowProgressBar="dataInfo.isShowMarque==-1?(cfg && cfg.isAllowProgressBar == 0? false : true):(dataInfo.isShowMarque==2?false:true)" :campPermission="campButtonStatus && campButtonStatus.campPermission" @audioPlayEnd="audioPlayEnd" @clickAfter="clickAfter" @clickBefor="clickBefor" @watchEnd="watchEnd" @getMiniQr="getMiniQr"
          @audioPause="audioPause" @appChangePlayIndex="appChangePlayIndex" @showFollowQr="showFollowQr" @goForm='goForm' @clickPlayBtn='clickPlayBtn' @checkIsSubscribe="checkIsSubscribe" :formflag='formflag' @changePlayType="changePlayType" @clickCover="clickCover"></audio-com>
      </div>
      <div id="oTop"></div>
      <!-- 营销活动倒计时 -->
      <flash-sales-time-new
        v-if="showMarketingTime"
        :type="dataInfo.sales? 'isSale':dataInfo.isFriendHelper ? 'isFa' : dataInfo.bargain ? 'isBargain' : 'isCollage'"
        :price="dataInfo.sales ? dataInfo.sales.price : dataInfo.collage ? dataInfo.collage.captainPrice : dataInfo.bargain ? dataInfo.bargain.reservePrice : ''"
        :from="dataInfo.collage && dataInfo.collage.collageGroupType && dataInfo.collage.collageGroupType == 2 ? 'activity' : ''"
        :startTime="dataInfo.sales ? dataInfo.sales.sales.startTime : dataInfo.bargain ? dataInfo.bargain.startTime : dataInfo.collage ? dataInfo.collage.startTime : dataInfo.faStartAt"
        :endTime="dataInfo.sales ? dataInfo.sales.sales.endTime : dataInfo.bargain ? dataInfo.bargain.endTime : dataInfo.collage ? dataInfo.collage.endTime : dataInfo.faEndAt"
        :originalPrice="dataInfo.price" :stock="dataInfo.sales ? dataInfo.sales.balance: ''" :stockBargain="dataInfo.bargain && dataInfo.bargain.stock"
        :isLimit="dataInfo.sales && dataInfo.sales.limit == 0 || (dataInfo.bargain && dataInfo.bargain.isLimitStock == 2) ? false : true" :salesTag="dataInfo.sales && dataInfo.sales.sales.tags"
        :peopleNum="dataInfo.collage && dataInfo.collage.peopleNum" :isPreheat="dataInfo.bargain && dataInfo.bargain.isPreheat" :bargainStatus="dataInfo.bargain && dataInfo.bargain.status"
        :optimal="optimal"
        class="c-text-hidden c-hh120" :class="cfg && cfg.enableAudioPlayerTop == 1 ? (scrollDirection == 0 ? 'to-show-height' : 'to-hide-height') : ''"
        @showCoupon="showCoupon = true" @falshSalesTime="falshSalesTime" @finishFlashSales="finishFlashSales">
      </flash-sales-time-new>
      <my-small-tabbar v-if="styleType == 1" class="c-p c-box-shadow10 c-bg-white" :class="!showNavBar ? 'c-wx-top0' : ''" id="tabhBar" :isNew="true" :tabNameClass="'c-fs24'" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
    </section>
    <template v-if="styleType == 1">
      <section
        id="courseInfo"
        :class="showBottomPlayer ? 'c-pb100' : ''"
        :style="cfg && cfg.enableAudioPlayerTop == 1 ? ((showMarketingBar && (dataInfo && !dataInfo.hasPermission) && scrollDirection == 0) ? 'padding-top: 16.19rem;' : 'padding-top: 13.19rem;') : ''"
      >
        <!-- 详情 -->
        <div class="c-pb20" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
          <div class="c-bd-b12-f5" ref="titleBar">
            <div class="c-flex-row c-aligni-center c-pr24">
              <div class="c-w0 c-flex-grow1">
                <price-bar class="c-pt28 c-pl24" v-if="isShowPriceBar"
                  :isFlat="true"
                  :recType="recType"
                  :dataInfo="dataInfo"
                  :chainInfo="chainInfo"
                >
                </price-bar>
                <div :class="!isOffSale && !isMarketing && !dataInfo.hasPermission && dataInfo.isSaleOnly != 0 ? 'c-pt12' : 'c-pt28'" class="c-ph24">
                  <span class="c-fs30 c-fc-xblack c-fw-b c-w0 c-flex-grow1">{{dataInfo.name}}</span>
                </div>
                <div class="c-ph24 c-p">
                  <!-- 需要展示价格和会员折扣模块的时候才有c-bd-b1 -->
                  <div class="c-pt16 c-pb28 c-fs20 c-fc-gray c-flex-row">
                    <span class="c-mr20" v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))">{{dataInfo.plays | formatNumber}}人收听</span>
                    <span class="c-mr20">共{{dataInfo != "" && dataInfo.items != null ? dataInfo.dirCount : 0}}节</span>
                    <valid-time-com v-if="dataInfo.isSaleOnly == 1" :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
                  </div>
                </div>
              </div>
              <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="1" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
            </div>
            <!-- 引导入群 -->
            <section
              v-if="showInviteGroup"
              @click="handleShowGuidePop()"
              class="c-mh24 c-mb30 c-pl16 c-pr20 c-hh64 c-fs24 camp-guide c-flex-row c-aligni-center"
            >
              <img class="c-ww52 c-hh32" src="../../../assets/i/wap/course/group_guide.png" alt="">
              <div class="c-w0 c-flex-grow1 c-fc-xblack c-fw600 c-pl16">{{dataInfo.guideData.guideDesc}}</div>
              <div class="iconfont c-fs40 fc-3F73F8">&#xe986;</div>
            </section>
            <div v-if="!$isStore() && dataInfo.hasPermission && relatedList && relatedList.length > 0" class="c-bd-t12-f5 c-pv24 c-pl24">
              <div class="c-fs24 c-fc-xblack c-fw600">搭配学习</div>
              <div id="relatedScroll" class="c-mt20 c-contextX-scroll c-fs0 c-flex-row">
                <div v-show="index < 5" v-for="(item, index) in relatedList" :key="index" @click="goRevlantDetail(item.mainProdType, item.id,item)" class="c-ww210 c-inlineblack c-mr20 c-vcAlign-top">
                  <div class="c-ww210 c-hh140 c-p c-br6">
                    <img class="c-ww210 c-hh140 c-br4" :src="$addXossFilter(item.cover)" alt="">
                    <div v-if="item.mainProdType != 111 || (item.mainProdType == 111 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                      <span class="iconfont c-fc-white c-fs20 c-vcAlign-middle">&#xe7bc;</span>
                      <span class="c-fc-white c-ml4">{{item.number}}<span class="c-ph4">·</span>{{item.mainProdType == 111 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                    </div>
                    <div v-else class="c-fs16 c-ph10 c-translucent-balck50 c-hh26 c-lh28 c-pa c-p-t8 c-p-r8 c-br15">
                      <span class="c-fc-white">{{item.mainProdType == 111 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</span>
                    </div>
                  </div>
                  <div class="c-fs24 c-fc-xblack c-ww210 c-mt6 c-text-ellipsis2 c-ws-pw">{{item.name}}</div>
                </div>
              </div>
            </div>
            <!-- 非强制表单入口 -->
            <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
              relType="2"  :relId="courseId"  :dataInfo="dataInfo"
              classObject="c-fs22" fontSizeClass="c-fs20" iconSizeClass="c-fs14" topClass="c-bd-t12-f5"
              @goForm="goForm" ></formEntry>
            <!-- 领取证书 -->
            <div v-if="showStudyCard" class="c-ph24 c-pv20" @click="handleClickCertificate()">
              <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
                <div class="c-ww36 c-hh40">
                  <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
                </div>
                <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
                  <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
                </div>
                <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
                  查看
                  <i class="iconfont c-pl10">&#xe635;</i>
                </div>
              </div>
            </div>
            <!-- 积分及会员，大转盘，vip入口优惠提示 -->
            <discount-tip
              :hasCircle="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
              :hasGiftRelates="dataInfo.giftRelates && dataInfo.giftRelates.length > 0 ? true : false"
              :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0"
              :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
              :isNew="true"
              :sales="dataInfo.sales" :collage="dataInfo.collage"
              :isFriendHelper="dataInfo.isFriendHelper"
              :distributionId="distribution"
              :couponList="couponList"
              :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''"
              :isiOS='isiOS'
              :showTurn="showTurn"
              :isMarketing='dataInfo.sales'
              :hasRelatesDatum="dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0"
              :hasPermission='dataInfo.hasPermission'
              :showDiscount="showDiscount"
              :isRecommend="isRecommend"
              :showIntegrate="!$isStore() && dataInfo.hasPermission && !distributionId && companyAuth.pointModel == 1 && showInt && companyAuth.enablePoints == 1 && companyAuth.enableListenAudioPoint == 1 && pointsOnBuyingAudio * 1 > 0"
              :dataInfo="dataInfo"
              :chainInfo="chainInfo"
              @joinCircle="joinCircle"
              @clickShowCoupon="showCoupon = true"
              @goTOturn="goTOturn"
              @getIntegration="getIntegration"
              @popRelate="popRelate"
              @popGiftModal="popGiftModal"
              @popRelatesDatum="popRelatesDatumModal"
              v-if="(dataInfo.payType==2 || (dataInfo.relateDatumArr && dataInfo.relateDatumArr.length) || (dataInfo.circleList && dataInfo.circleList.length) || ((dataInfo.payType==1 || dataInfo.payType==3) && dataInfo.hasPermission && !distributionId && companyAuth.pointModel == 1 && showInt && companyAuth.enablePoints == 1 && companyAuth.enableListenAudioPoint == 1 && pointsOnBuyingAudio * 1 > 0)) && !isOffSale && !isUserGroup && !isStoreUserGroup"></discount-tip>
            <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status" class="c-bd-t12-f5"></bargain-rules>
          </div>
          <collage-persons-list v-if="dataInfo && !dataInfo.hasPermission && (ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
          <!-- 主推商品 -->
          <course-advocate :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
          <collocation-buy-com :prodInfo="{prodType: 5, prodId: courseId}" :relateCollocationArr="relateCollocation"></collocation-buy-com>
          <lecturer-com class="c-pt24 c-pb40 c-bd-b12-f5" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0" :lecturersArr="dataInfo.lecturers" :courseId="courseId" :showLecturerModal="showLecturerModal" @closeDetailModal="showLecturerModal=false" @clickLecturer="clickLecturer"></lecturer-com>
          <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission" :positionType="moreDeviceType" :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 1, name: dataInfo.name}"></more-device>
          <div class="c-ph24 c-pb20 c-pt10">
            <div class="c-p">
              <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distributionId" @checkHasDescription="checkHasDescription" ref="descriptions" :prodType="cfrom.course" :prodId="courseId" :descriptList="descriptList"></course-description>
              <div v-else @click="clickDesc" class="course-dir-desc-parent tinymce-text c-lh36 c-ww-bw c-ww-ba c-contexty-scroll c-pb40" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']" v-html="dataInfo.desc"></div>
              <div v-if="isOffSale" class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-balck3 c-pz1">
                <div class="c-w100 c-h backdropFilter"></div>
                <div class="theme-fc c-textAlign-c c-pa c-w100 c-p-t20">
                  <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
                  <div class="c-fs24 c-pt12 c-textAlign-c">课程已下架</div>
                </div>
              </div>
            </div>
            <package-index-com
              :showPackageModal="true" @clickGoAllPackage="clickGoAllPackage"
              :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
              :packageList="dataInfo.combos.filter((item,index) => {return index == 0})"
              v-if="dataInfo && dataInfo.combos.length > 0">
            </package-index-com>
            <div class="c-flex-row c-flex-center c-pt30 c-pb40 " v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
              <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="!dataInfo.isLike ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
                <span class="c-fs28 c-fc-white c-mr10 iconfont" :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
                <span :class="!dataInfo.isLike ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
              </div>
            </div>
          </div>
          <!-- 所属专栏 -->
          <div class="c-ph24" v-if="fromColumnId != -1">
            <related-combo :showType="1" :distributionId="distributionId" :isShowModal="false" :columnList="belongColumnList" :showCombo="true" :columnMore="is_page_column"
              @backPackage="backPackage" @closeCombo="closeCombo" @getMore="getMore"></related-combo>
          </div>
          <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
            <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
          </div>
        </div>
        <!-- 课程目录 -->
        <div :class="typeBar == 1 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" class="c-pt40 c-pb40" v-show="typeBar == 1">
          <div class="c-flex-row c-ph24 c-justify-sb">
            <div class='c-flex-row c-aligni-center c-flex-shrink0 c-mr10'>
              <h2 class="c-fw-n c-fc-xblack c-fs20 c-fc-gray">共{{dataInfo.dirCount}}节</h2>
            </div>
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs20 theme-fc c-mr20" @click="scrollPosition(1)" v-show="showLearnSign && learningPosition != null && !showSearchDirType">
                <span class="iconfont c-fs24 c-mr12">&#xe90f;</span>{{firstPosition == true ? '回到上次学习' : '回到当前学习'}}
              </div>
              <div v-show="!showSearchDirType" @click.stop="clickShowSearch(2)" class="iconfont c-ml30 c-fc-sblack c-fs28"><span class="c-vcAlign-middle">&#xe6d6;</span><span class="c-fs20 c-fw400 c-vcAlign-middle c-ml4">搜索</span></div>
              <div v-show="showSearchDirType" class="c-w100 c-hh56 search-bg c-br30 c-flex-row c-aligni-center">
                <span class="c-fs24 iconfont c-fc-gray c-mh20">&#xe6d6;</span>
                <input v-model="searchWordDirType" @focus='inputFocus' @blur='inputBlur' ref="searchContentDirType" class="c-fs24 c-fc-xblack c-flex-grow1 c-bd0 c-hh50 c-lh50 search-bg" type="text"
                  name="">
                <div @click="clickHideSearch(2)" class="c-fs22 c-fc-sblack c-pl20 c-pr28 c-bd-l1-mgray">取消</div>
              </div>
            </div>
          </div>
          <template v-if="cfg && cfg.dirType == 2">
            <div v-if="is_courseListPagePrev" @click="getCourseList(1)" class="c-fs22 c-fc-sgray c-textAlign-c c-pt24">加载更多</div>
            <div class="c-ph24 c-pv16 c-p" id="scrollCourseVtr">
              <template v-if="!(showSearchDirType && courseListLoading) || (!is_courseListPage && !is_courseListPagePrev)">
                <template v-for="(item,index) in dataInfo.items">
                  <div :key="item" v-if="item.chapterId && item.chapterSort == 1" v-show="!searchWordDirType" @click="hideChaptList(item, index)" :class="item.showStatus == 'hide' ? 'c-bd-b1-f6' : ''" class="c-pv32 c-p">
                    <div class="c-flex-row c-aligni-center">
                      <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600 c-text-ellipsis2">{{ item.parentName }}(共{{ item.cnt }}节)</div>
                      <div class="c-pl32 iconfont c-fs24 c-fc-gray">{{ item.showStatus == 'hide' ? '&#xfbcd;' : '&#xe67a;'}}</div>
                    </div>
                  </div>
                  <div :key="index" class="c-p" :class="[!item.chapterId || item.cnt == item.chapterSort ? 'c-bd-b1-f6' : '', !item.chapterId ? 'c-pv32' : 'c-pv18']" @click="seeVoice(index)" v-show="item.audioName.indexOf(searchWordDirType) != -1 && item.showStatus != 'hide'">
                    <div class="c-flex-row c-aligni-center">
                      <div class="c-w0 c-flex-grow1">
                        <div class="c-flex-row c-aligni-center">
                          <div class="c-fs24 c-text-ellipsis2 c-w0 c-flex-grow1">
                            <!-- <span v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                              试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                            </span>
                            <span v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                              试学
                            </span> -->
                            <div v-if="currentIndex == index" :class="playStatus == 1 ? '' : 'stop-animation'" class="c-vcAlign-middle c-inlineblack line-scale-pulse-out2 c-flex-row c-p c-mr10">
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                            </div>
                            <span :class="currentIndex == index ? 'c-fw600 theme-fc' : 'c-fw-n c-fc-xblack'" class="c-wordBreakAll c-vcAlign-middle">{{item.audioName}}</span>
                          </div>
                        </div>
                        <div :class="currentIndex == index ? 'theme-fc' : 'c-fc-gray'" class="c-mt8">
                          <div class="c-flex-row c-aligni-center">
                            <!-- <div class="iconfont c-fs20 c-fc-gray c-mr10">&#xe70f;</div> -->
                            <div v-if="currentIndex == index && playStatus == 1" class="c-fs20 c-fc-gray c-mr20">正在播放</div>
                            <div v-else-if="item.progressRatio == 1"
                              class="c-fs20 c-fc-gray c-mr20">已完成</div>
                            <div v-else
                              class="c-fs20 c-fc-gray c-mr20">{{(item.progressRatio && item.progressRatio > 0) ? ('已学' + Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                            <div v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4 c-mr20">试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}</div>
                            <div v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4 c-mr20">试学</div>
                            <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4">上次学到</div>
                          </div>
                        </div>
                      </div>
                      <div class="c-fc-sgray iconfont c-fs24 c-pl32"
                        v-if="dataInfo.hasPermission == false &&
                          !(item.isPreview == 1 && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)) &&
                          !(distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false)"
                      >&#xe8bc;
                      </div>
                      <div v-else-if="item.detail" @click.stop="showItemDetail = true;showItemDetailIndex = index;" class="c-pl32 iconfont c-fs32 c-fc-gray">&#xe79a;</div>
                    </div>
                    <!-- <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-flex-row c-ph4 c-hh28 c-lh30 theme-bg c-fc-white c-br4 c-pa c-p-r0 c-p-t8">上次学到</div> -->
                  </div>
                </template>
              </template>
              <loading-status-tem :showLoading="courseListLoading" :noMoreData="!is_courseListPage && (dataInfo.items && dataInfo.items.length > 0)" :noData="!dataInfo.items || dataInfo.items.length == 0" :pt20="true" :noDataText="'老师正在准备内容'"></loading-status-tem>
              <div v-if="is_courseListPagePrev && dataInfo.items.length < 3" class="c-hh120"></div>
            </div>
            <div v-if="is_courseListPage" @click="getCourseList()" class="c-fs22 c-fc-sgray c-pb12 c-textAlign-c">点击加载更多</div>
          </template>
          <template v-else>
            <div :class="dataInfo.items && dataInfo.dirCount > 0 ? 'c-bd-b12-f5' : ''" class="c-pb24">
              <div class="c-pl10">
                <div class="c-pv24 c-pl14 c-contextX-scroll c-fs0 c-flex-row" id="scrollCourse">
                  <!-- <template v-for="(item, index) in dataInfo.items"> -->
                  <!-- <div :key="index" v-if="index == 1" class="c-hh156 c-ww250 c-flex-shrink0 c-mr12 c-pv10 c-ph16 c-bg-F6F8F9 c-p c-br10 c-fc-xblack">
                      <div class="c-fs22 c-text-ellipsis2 c-lh32 c-hh64 c-mt36">
                        <span class="c-wordBreakAll c-vcAlign-middle c-fw600">封建势力都解封了世纪东方是发生的发生的发</span>
                      </div>
                      <div class="c-flex-row c-aligni-center c-justify-sb c-mt8">
                        <div class="c-fs20 c-fc-gray">共5节</div>
                        <div class="c-fs20 theme-fc">收起</div>
                      </div>
                    </div> -->
                  <div v-for="(item, index) in dataInfo.items" :key="index" class="c-hh156 c-ww250 c-flex-shrink0 c-pv10 c-ph16 c-bg-F6F8F9 c-p c-br10"
                    :class="[currentIndex == index ? 'theme-fc' : 'c-fc-xblack', showHorizontalGap(dataInfo.items, index) ? 'c-mr44' : 'c-mr12']"
                    v-show="item.audioName.indexOf(searchWordDirType) != -1"
                    @click="seeVoice(index)">
                    <div class="gap-border c-flex-column c-justify-sb" v-if="showHorizontalGap(dataInfo.items, index)">
                      <div class="gap-border-inner"></div>
                      <div class="gap-border-inner"></div>
                    </div>
                    <div v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-t0 c-p-r0 c-hh28 c-flex-row c-flex-center c-br-bl10 c-br-tr10 c-ph4">
                      试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                    </div>
                    <div v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-t0 c-p-r0 c-hh28 c-flex-row c-flex-center c-br-bl10 c-br-tr10 c-ph4">
                      试学
                    </div>
                    <div v-if="currentIndex == index && playStatus == 1" class="c-fs20 c-fc-gray c-hh28">正在播放</div>
                    <div v-else-if="item.progressRatio == 1" class="c-fs20 c-fc-gray c-hh28">已完成</div>
                    <div v-else class="c-fs20 c-fc-gray c-hh28">{{(item.progressRatio && item.progressRatio > 0) ? '已学' + (Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                    <div class="c-fs22 c-text-ellipsis2 c-lh32 c-hh64 c-mt8">
                      <!-- <span v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                        试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                      </span>
                      <span v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                        试学
                      </span> -->
                      <div v-if="currentIndex == index" :class="playStatus == 1 ? '' : 'stop-animation'" class="c-vcAlign-middle c-inlineblack line-scale-pulse-out2 c-flex-row c-p c-mr10">
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                      </div>
                      <span class="c-wordBreakAll c-vcAlign-middle c-fw600">{{item.audioName}}</span>
                    </div>
                    <div class="c-flex-row c-aligni-center c-justify-end">
                      <!-- <div class="c-flex-row c-aligni-center">
                        <div class="iconfont c-fs20 c-fc-gray c-mr10">&#xe70f;</div>
                        <div v-if="currentIndex == index && isPlaying" class="c-fs20 c-fc-gray">正在播放</div>
                        <div v-else-if="item.progressRatio == 1"
                          class="c-fs20 c-fc-gray">已完成</div>
                        <div v-else
                          class="c-fs20 c-fc-gray">{{(item.progressRatio && item.progressRatio > 0) ? (Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                      </div> -->
                      <div class="c-fc-sgray iconfont c-fs24 c-lh28"
                        v-if="dataInfo.hasPermission == false &&
                          !(item.isPreview == 1 && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)) &&
                          !(distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false)">
                        &#xe8bc;</div>
                    </div>
                    <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-b10 c-p-l16 c-hh28 c-flex-row c-flex-center c-ph4 c-br4">上次学到</div>
                    <!-- <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-fc-white theme-bg c-ww72 c-hh26 c-flex-row c-flex-center c-pa p-l-1 c-p-t-1 c-br-tl8 c-br-br8">
                      上次学到
                    </div> -->
                  </div>
                  <!-- </template> -->
                  <div v-if="is_courseListPagePrev && dataInfo.items.length < 3" class="c-hh114 c-ww380 c-flex-shrink0"></div>
                </div>
              </div>
              <div @click="popCourseList" class="c-flex-row c-aligni-center c-justify-center c-mt16" v-if="dataInfo.dirCount > 2">
                <span class="c-fs20 c-fc-gray">查看全部目录</span>
              </div>
              <loading-status-tem :showLoading="courseListLoading" :noData="!dataInfo.items || dataInfo.items.length == 0" :pt20="true" :noDataText="'老师正在准备内容'"></loading-status-tem>
            </div>
            <template v-if="dataInfo.items && dataInfo.dirCount > 0 && dataInfo.items[currentIndex]">
              <h2 class="c-ph24 c-fw-n c-fc-xblack c-fs26 c-fw-b c-mt20">{{dataInfo.items[currentIndex].audioName}}</h2>
              <div @click="clickDesc" class="c-ph24 course-dir-desc-parent tinymce-text c-lh36 c-fc-sblack c-ww-bw c-wb-ba c-contexty-scroll c-mt20" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
                v-if="dataInfo.items && dataInfo.items[currentIndex]"
                v-html="dataInfo.items[currentIndex] && (dataInfo.hasPermission || (dataInfo.items[currentIndex].allowWholeWatch == 1 && dataInfo.items[currentIndex].isPreview == 1)) ? (dataInfo.items[currentIndex].detail ? dataInfo.items[currentIndex].detail : '暂无简介') : dataInfo.payType!=3?'购买后可看':''">
              </div>
            </template>
          </template>
        </div>
        <div :class="typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 2">
          <commentCom ref="commentCom" v-show="commentStatus == 1" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
          <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
            <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
          </div>
        </div>
        <!-- 相关推荐 -->
        <div :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 4">
          <!-- 分销商城没有知识套餐和关联 -->
          <template v-if="!distributionId">
            <!-- <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="1" :proId="courseId" :isHomePage="false" :packageList="dataInfo.combos" v-if="dataInfo && dataInfo.combos.length > 0"></package-index-com> -->
            <loading-status-tem :showLoading="true" v-if="relationData==''"></loading-status-tem>
            <div class="">
              <active-and-column v-if="relationData != ''" :courseList="relationData.courses" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
                :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :eBookList="relationData.ebooks" :circleList="relationData.circle"></active-and-column>
            </div>
            <loading-status-tem
              :pt20="true" :class="dataInfo.combos == '' && relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '' ? 'c-pv160' : ''"
              :noData="dataInfo.combos == '' && relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == ''"
              :noDataText="'暂无推荐'"></loading-status-tem>
          </template>
        </div>
      </section>
    </template>
    <template v-if="styleType == 2">
      <section
        id="courseInfo"
        :class="showBottomPlayer ? 'c-pb100' : ''"
        :style="cfg && cfg.enableAudioPlayerTop == 1 ? ((showMarketingBar && (dataInfo && !dataInfo.hasPermission) && scrollDirection == 0) ? 'padding-top: 14.29rem;' : 'padding-top: 11.29rem;') : ''"
      >
        <div class="c-bd-b12-f5 c-mt24">
          <price-bar v-if="isShowPriceBar"
            :isFlat="true"
            :recType="recType"
            :dataInfo="dataInfo"
            :styleType="2"
            :chainInfo="chainInfo"
          >
          </price-bar>
          <discount-info class="c-mt8" v-if="!$isWxAppIos() && !distributionId && !isiOS && !dataInfo.hasPermission && dataInfo.isSaleOnly != 0 && dataInfo.payType == 2 && !isRecommend"
            :couponList="couponList"
            :isMarketing="isMarketing"
            :dataInfo="dataInfo"
            :chainInfo="chainInfo"
            @clickShowCoupon="showCoupon = true"
          >
          </discount-info>
          <div class="c-ph24 c-mt20" v-if="!dataInfo.hasPermission && !$isWxAppIos() && !isiOS && !isRecommend">
            <vip-entry
              :styleType="2"
              :dataInfo="dataInfo"
            ></vip-entry>
          </div>
          <div v-if="!isRecommend || (isRecommend && dataInfo.hasPermission)" class="c-ph24 c-mt24">
            <div class="c-fs30 c-fc-xblack c-fw600">{{dataInfo.name}}</div>
          </div>
          <div class="c-flex-row c-aligni-center c-ph24 c-pb30">
            <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center c-w0 c-flex-grow1 c-flexw-wrap">
              <div class="c-mr20 c-pv4"><span class="c-fs20 iconfont c-mr4">&#xe69c;</span>共{{dataInfo != "" && dataInfo.items != null ? dataInfo.dirCount : 0}}节</div>
              <div class="c-mr20" v-if="!distributionId && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(cfrom.course)))"><span class="c-fs20 iconfont c-mr4 c-pv4">&#xe6bb;</span>{{dataInfo.plays | formatNumber}}人收听</div>
              <div class="c-flex-row c-aligni-center c-pv4" v-if="dataInfo.isSaleOnly == 1">
                <span class="c-fs20 iconfont c-mr4">&#xe7a6;</span>
                <valid-time-com :dataInfo="dataInfo" :prodId="courseId" :prodType="cfrom.course"></valid-time-com>
              </div>
            </div>
            <div class="c-flex-row c-aligni-center">
              <div v-if="dataInfo.showPresentFriend && !isiOS && !$isWxApp()" class="c-flex-column c-aligni-center c-ww52 c-mr8 coms-live-iframe-none" @click="popPresentCourse">
                <div class="iconfont c-fs36 c-fc-xblack">&#xe7b9;</div>
                <div class="c-fs16 c-fc-xblack c-mt4">赠送</div>
              </div>
              <collect-btn-com v-if="!distributionId" :needBindPhone="bindPhoneSetting && bindPhoneSetting.collectBind" :hasCollect="isCollect" :prodType="cfrom.course" :prodId="courseId" :subProdType="1" class="" @doCollect="doCollect" @cancelCollect="cancelCollect"></collect-btn-com>
            </div>
          </div>
          <!-- 引导入群 -->
          <invite-group class="c-pr24 c-pb24"
            v-if="showInviteGroup"
            :guideText="dataInfo.guideData.guideDesc"
            @handleShowGuidePop="handleShowGuidePop"
          >
          </invite-group>
        </div>
        <div v-if="(showTurn || showGetIntegrate || hasGiftRelates || (dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0) || (!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0) || (dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0) || (dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0]) || (relateCollocation && relateCollocation.length > 0)) && !isOffSale && !isUserGroup && !isStoreUserGroup" class="c-ph24 c-bd-b12-f5">
          <discount-tip :styleType="2" :prodInfo="{prodType: 5, prodId: courseId}" :relateCollocationArr="relateCollocation" :recommendProdInfo="!dataInfo.hasPermission && dataInfo.centerProducts && dataInfo.centerProducts.length > 0 && dataInfo.centerProducts[0] ? dataInfo.centerProducts[0] : null" @joinCircle="joinCircle" :hasCircle="dataInfo && !dataInfo.hasPermission && dataInfo.circleList && dataInfo.circleList.length > 0" :hasGiftRelates="hasGiftRelates" :giftRelatesCount="dataInfo.giftRelates ? dataInfo.giftRelates.length : 0" :hasCollocation="!$isStore() && !dataInfo.hasPermission && relatedList && relatedList.length > 0 ? true : false"
            @goTOturn="goTOturn" @getIntegration="getIntegration" @popRelate="popRelate" @popGiftModal="popGiftModal"
            :turnName="dataInfo.joinActivityInfo && dataInfo.joinActivityInfo.activityData?dataInfo.joinActivityInfo.activityData.name:''" :hasRelatesDatum="dataInfo && dataInfo.relateDatumArr && dataInfo.relateDatumArr.length > 0" @popRelatesDatum="popRelatesDatumModal"
            :showTurn="showTurn" :showIntegrate="showGetIntegrate" @goCenterProduct="goCenterProduct"></discount-tip>
        </div>
        <!-- 非强制表单入口 -->
        <formEntry v-if="dataInfo.hasPermission && ((dataInfo.collectPage==3&& dataInfo.isRelForm == true && dataInfo.hasFormLog == false && isShowFormlg)||(dataInfo.hasFormLog&&dataInfo.enableEdit==2&& isShowFormlg&& dataInfo.isRelForm == true))"
          relType="2"  :relId="courseId"   :dataInfo="dataInfo"
          classObject="c-fs24 c-fw600" fontSizeClass="c-fs22" iconSizeClass="c-fs18" topClass="c-bd-b12-f5"
          @goForm="goForm" ></formEntry>
        <!-- 领取证书 -->
        <div v-if="showStudyCard" class="c-ph24 c-pv20" @click="handleClickCertificate()">
          <div class="badge-bg c-flex-row c-aligni-center c-justify-sb c-ph20 c-pv20">
            <div class="c-ww36 c-hh40">
              <img :src="require('@/assets/i/wap/camp/medal.png')" class="c-w100 c-h c-object-fit-c" alt="">
            </div>
            <div class="c-w0 c-flex-column c-flex-grow1 c-justify-sb c-ph10">
              <div class="c-fc-A2743D c-fs28 c-fw600 c-text-ellipsis1">恭喜您获得学习证书</div>
            </div>
            <div class="c-fs22 c-fc-A2743D c-flex-row c-flex-center">
              查看
              <i class="iconfont c-pl10">&#xe635;</i>
            </div>
          </div>
        </div>
        <bargain-rules v-if="dataInfo.bargain != null && !dataInfo.hasPermission" class="c-bd-b12-f5" :isPreheat="dataInfo.bargain.isPreheat" :status="dataInfo.bargain.status"></bargain-rules>
        <collage-persons-list v-if="dataInfo && !dataInfo.hasPermission && (ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)" class="c-bd-b12-f5" :isCourse="true" :hasExpired="hasExpired" :collage="dataInfo.collage" @startCollage="goCollageDetail(-1,dataInfo.collage.collageId)" @goCollageDetail="gcd"></collage-persons-list>
        <more-device class="c-bd-b12-f5" v-if="dataInfo.hasPermission && typeBar == 0" :positionType="moreDeviceType" :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 1, name: dataInfo.name}"></more-device>
        <!-- <collocation-buy-com :relateCollocationArr="relateCollocation"></collocation-buy-com> -->
        <div class="c-hh76" id="tabhBar">
          <my-small-tabbar class="c-bg-white c-hh76 c-bd-b1-f6 c-ph24" :styleType="2" :class="tabhBarFixed == true ? isiOS ? 'tab-bar-ios' : ($isWxApp() ? 'tabhBar ' + (cfg.enableAudioPlayerTop == 0 ? 'c-wx-top0' : 'wx-top1') : (cfg.enableAudioPlayerTop == 0 ? 'tabhBar ' + (showNavBar ? 'top1' : 'c-wx-top0') : 'tabhBar ' + (showNavBar ? 'top2' : 'wx-top1')))  : ''" :tabList="tabList" :tabIndex="typeBar" @changeTab="changeType"></my-small-tabbar>
        </div>
        <div class="c-pb40" :class="typeBar == 0 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 0">
          <lecturer-com class="c-pt24 c-pb10" v-if="dataInfo.lecturers && dataInfo.lecturers.length > 0" :lecturersArr="dataInfo.lecturers" :courseId="courseId" :showLecturerModal="showLecturerModal" @closeDetailModal="showLecturerModal=false" @clickLecturer="clickLecturer"></lecturer-com>
          <div class="c-ph24 c-pb20 c-pt10">
            <div class="c-p">
              <course-description :independentCopy="cfg.isCopy" :independentCopyPicture="cfg.isCopyPicture" v-if="!distributionId" @checkHasDescription="checkHasDescription" ref="descriptions" :prodType="cfrom.course" :prodId="courseId"></course-description>
              <div @click="clickDesc" v-else class="course-dir-desc-parent tinymce-text c-lh36 c-fc-sblack c-ww-bw c-ww-ba c-contexty-scroll c-pt20 c-pb40" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
                v-html="dataInfo.desc"></div>
              <div v-if="isOffSale" class="c-w100 c-h c-pa c-p-t0 c-p-l0 glass c-translucent-balck3 c-pz1">
                <div class="c-w100 c-h backdropFilter"></div>
                <div class="theme-fc c-textAlign-c c-pa c-w100 c-p-t20">
                  <div class="iconfont c-fs46 c-textAlign-c">&#xe8bc;</div>
                  <div class="c-fs24 c-pt12 c-textAlign-c">课程已下架</div>
                </div>
              </div>
            </div>
            <div class="c-flex-row c-flex-center c-pt30 c-pb40" v-if="cfg ? (cfg.enableLikes == 1 ? true : false) : false">
              <div class="c-fs28 c-ph24 c-textAlign-c c-pv12 c-br36 c-inline-center" :class="dataInfo.isLike == false ? 'theme-bg theme-box-shadow' : 'c-bg-f2'" @click="clickLikes">
                <span class="c-fs28 c-mr10 iconfont" :class="dataInfo.isLike == false ? 'c-fc-white' : 'theme-fc'">&#xe684;</span>
                <span :class="dataInfo.isLike == false ? 'c-fc-white' : 'theme-fc'">{{dataInfo.likes | formatNumber}}</span>
              </div>
            </div>
          </div>
          <package-index-com
            :showPackageModal="true" @clickGoAllPackage="clickGoAllPackage"
            :styleType="2" :relevantTitles="'包含该课程的系列课'" :showAll="true" :proType="1" :proId="courseId" :isHomePage="false"
            :packageList="dataInfo.combos.filter((item,index) => {return index == 0})"
            v-if="dataInfo && dataInfo.combos.length > 0">
          </package-index-com>
          <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
            <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
          </div>
        </div>
        <div :class="typeBar == 1 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" class="c-pt24 c-pb40" v-show="typeBar == 1">
          <div v-if="dataInfo.dirCount > 0" class="c-ph24 c-flex-row c-justify-sb c-pb20 c-bd-b1-f6">
            <div class="c-flex-row c-aligni-center">
              <div class='c-flex-row c-aligni-center c-flex-shrink0 c-mr10'>
                <h2 class="c-fw-n c-fc-xblack c-fs22 c-fc-gray">共{{dataInfo.dirCount}}节</h2>
              </div>
              <!-- <div class="c-fs20 c-fc-white c-mr20 theme-bg c-ph16 c-pv6 c-br10" @click="scrollPosition(1)" v-show="showLearnSign && learningPosition != null && !showSearchDirType">
                <span class="iconfont c-fs22 c-mr8">&#xe6e2;</span>{{firstPosition == true ? '回到上次学习' : '回到当前学习'}}
              </div> -->
            </div>
            <div class="c-flex-row c-aligni-center">
              <div v-show="!showSearchDirType" @click.stop="clickShowSearch(2)" class="iconfont c-ml40 c-fc-sblack c-fs28"><span class="c-vcAlign-middle">&#xe6d6;</span></div>
              <div v-show="showSearchDirType" class="c-w100 c-hh56 search-bg c-br30 c-flex-row c-aligni-center">
                <span class="c-fs24 iconfont c-fc-gray c-mh20">&#xe6d6;</span>
                <input v-model="searchWordDirType" @focus='inputFocus' @blur='inputBlur' ref="searchContentDirType" class="c-fs24 c-fc-xblack c-flex-grow1 c-bd0 c-hh50 c-lh50 search-bg" type="text"
                  name="">
                <div @click="clickHideSearch(2)" class="c-fs22 c-fc-sblack c-pl20 c-pr28 c-bd-l1-mgray c-flex-shrink0">取消</div>
              </div>
            </div>
          </div>
          <template v-if="cfg && cfg.dirType == 2">
            <div v-if="is_courseListPagePrev" @click="getCourseList(1)" class="c-fs22 c-fc-sgray c-textAlign-c c-pt24">加载更多</div>
            <div class="c-ph24 c-pb16 c-p" id="scrollCourseVtr">
              <template v-if="!(showSearchDirType && courseListLoading) || (!is_courseListPage && !is_courseListPagePrev)">
                <template v-for="(item,index) in dataInfo.items">
                  <div :key="item" v-if="item.chapterId && item.chapterSort == 1" v-show="!searchWordDirType" @click="hideChaptList(item, index)" :class="item.showStatus == 'hide' ? 'c-bd-b1-f6' : ''" class="c-pv32 c-p">
                    <div class="c-flex-row c-aligni-center">
                      <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600 c-text-ellipsis2">{{ item.parentName }}(共{{ item.cnt }}节)</div>
                      <div class="c-pl32 iconfont c-fs24 c-fc-gray">{{ item.showStatus == 'hide' ? '&#xfbcd;' : '&#xe67a;'}}</div>
                    </div>
                  </div>
                  <div :key="index" class="c-p" :class="[!item.chapterId || item.cnt == item.chapterSort ? 'c-bd-b1-f6' : '', !item.chapterId ? 'c-pv32' : 'c-pv18']" @click="seeVoice(index)" v-show="item.audioName.indexOf(searchWordDirType) != -1 && item.showStatus != 'hide'">
                    <div class="c-flex-row c-aligni-center">
                      <div class="c-w0 c-flex-grow1">
                        <div class="c-flex-row c-aligni-center">
                          <div class="c-fs24 c-text-ellipsis2 c-w0 c-flex-grow1">
                            <!-- <span v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                              试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                            </span>
                            <span v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                              试学
                            </span> -->
                            <div v-if="currentIndex == index" :class="playStatus == 1 ? '' : 'stop-animation'" class="c-vcAlign-middle c-inlineblack line-scale-pulse-out2 c-flex-row c-p c-mr10">
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                              <div class="theme-bg c-inlineblack"></div>
                            </div>
                            <span :class="currentIndex == index ? 'c-fw600 theme-fc' : 'c-fw-n c-fc-xblack'" class="c-wordBreakAll c-vcAlign-middle">{{item.audioName}}</span>
                          </div>
                        </div>
                        <div :class="currentIndex == index ? 'theme-fc' : 'c-fc-gray'" class="c-mt8">
                          <div class="c-flex-row c-aligni-center">
                            <!-- <div class="iconfont c-fs20 c-fc-gray c-mr10">&#xe70f;</div> -->
                            <div v-if="currentIndex == index && playStatus == 1" class="c-fs20 c-fc-gray c-mr20">正在播放</div>
                            <div v-else-if="item.progressRatio == 1"
                              class="c-fs20 c-fc-gray c-mr20">已完成</div>
                            <div v-else
                              class="c-fs20 c-fc-gray c-mr20">{{(item.progressRatio && item.progressRatio > 0) ? ('已学' + Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                            <div v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4 c-mr20">试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}</div>
                            <div v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4 c-mr20">试学</div>
                            <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-ph8 c-flex-row c-flex-center theme-bd1 theme-fc c-br4">上次学到</div>
                          </div>
                        </div>
                      </div>
                      <div class="c-fc-sgray iconfont c-fs24 c-pl32"
                        v-if="dataInfo.hasPermission == false &&
                          !(item.isPreview == 1 && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)) &&
                          !(distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false)"
                      >&#xe8bc;
                      </div>
                      <div v-else-if="item.detail" @click.stop="showItemDetail = true;showItemDetailIndex = index;" class="c-pl32 iconfont c-fs32 c-fc-gray">&#xe79a;</div>
                    </div>
                    <!-- <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-flex-row c-ph4 c-hh28 c-lh30 theme-bg c-fc-white c-br4 c-pa c-p-r0 c-p-t8">上次学到</div> -->
                  </div>
                </template>
              </template>
              <loading-status-tem :showLoading="courseListLoading" :noMoreData="!is_courseListPage && (dataInfo.items && dataInfo.items.length > 0)" :noData="!dataInfo.items || dataInfo.items.length == 0" :pt20="true" :noDataText="'老师正在准备内容'"></loading-status-tem>
              <div v-if="is_courseListPagePrev && dataInfo.items.length < 3" class="c-hh120"></div>
            </div>
            <div v-if="is_courseListPage" @click="getCourseList()" class="c-fs22 c-fc-sgray c-pb12 c-textAlign-c">点击加载更多</div>
          </template>
          <template v-else>
            <div class="c-pb40">
              <div class="c-pl10">
                <div class="c-pv24 c-pl14 c-contextX-scroll c-fs0 c-flex-row" id="scrollCourse">
                  <!-- <template v-for="(item, index) in dataInfo.items"> -->
                  <!-- <div :key="index" v-if="index == 1" class="c-hh156 c-ww250 c-flex-shrink0 c-mr12 c-pv10 c-ph16 c-bg-F6F8F9 c-p c-br10 c-fc-xblack">
                      <div class="c-fs22 c-text-ellipsis2 c-lh32 c-hh64 c-mt36">
                        <span class="c-wordBreakAll c-vcAlign-middle c-fw600">封建势力都解封了世纪东方是发生的发生的发</span>
                      </div>
                      <div class="c-flex-row c-aligni-center c-justify-sb c-mt8">
                        <div class="c-fs20 c-fc-gray">共5节</div>
                        <div class="c-fs20 theme-fc">收起</div>
                      </div>
                    </div> -->
                  <div v-for="(item, index) in dataInfo.items" :key="index" class="c-hh156 c-ww250 c-flex-shrink0 c-pv10 c-ph16 c-bg-F6F8F9 c-p c-br10"
                    :class="[currentIndex == index ? 'theme-fc' : 'c-fc-xblack', showHorizontalGap(dataInfo.items, index) ? 'c-mr44' : 'c-mr12']"
                    v-show="item.audioName.indexOf(searchWordDirType) != -1"
                    @click="seeVoice(index)">
                    <div class="gap-border c-flex-column c-justify-sb" v-if="showHorizontalGap(dataInfo.items, index)">
                      <div class="gap-border-inner"></div>
                      <div class="gap-border-inner"></div>
                    </div>
                    <div v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-t0 c-p-r0 c-hh28 c-flex-row c-flex-center c-br-bl10 c-br-tr10 c-ph4">
                      试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                    </div>
                    <div v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-t0 c-p-r0 c-hh28 c-flex-row c-flex-center c-br-bl10 c-br-tr10 c-ph4">
                      试学
                    </div>
                    <div v-if="currentIndex == index && playStatus == 1" class="c-fs20 c-fc-gray c-hh28">正在播放</div>
                    <div v-else-if="item.progressRatio == 1" class="c-fs20 c-fc-gray c-hh28">已完成</div>
                    <div v-else class="c-fs20 c-fc-gray c-hh28">{{(item.progressRatio && item.progressRatio > 0) ? '已学' + (Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                    <div class="c-fs22 c-text-ellipsis2 c-lh32 c-hh64 c-mt8">
                      <!-- <span v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                        试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                      </span>
                      <span v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                        试学
                      </span> -->
                      <div v-if="currentIndex == index" :class="playStatus == 1 ? '' : 'stop-animation'" class="c-vcAlign-middle c-inlineblack line-scale-pulse-out2 c-flex-row c-p c-mr10">
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                        <div class="theme-bg c-inlineblack"></div>
                      </div>
                      <span class="c-wordBreakAll c-vcAlign-middle c-fw600">{{item.audioName}}</span>
                    </div>
                    <div class="c-flex-row c-aligni-center c-justify-end">
                      <!-- <div class="c-flex-row c-aligni-center">
                        <div class="iconfont c-fs20 c-fc-gray c-mr10">&#xe70f;</div>
                        <div v-if="currentIndex == index && isPlaying" class="c-fs20 c-fc-gray">正在播放</div>
                        <div v-else-if="item.progressRatio == 1"
                          class="c-fs20 c-fc-gray">已完成</div>
                        <div v-else
                          class="c-fs20 c-fc-gray">{{(item.progressRatio && item.progressRatio > 0) ? (Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                      </div> -->
                      <div class="c-fc-sgray iconfont c-fs24 c-lh28"
                        v-if="dataInfo.hasPermission == false &&
                          !(item.isPreview == 1 && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)) &&
                          !(distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false)">
                        &#xe8bc;</div>
                    </div>
                    <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 theme-bg-10 theme-fc c-pa c-p-b10 c-p-l16 c-hh28 c-flex-row c-flex-center c-ph4 c-br4">上次学到</div>
                    <!-- <div v-if="learningPosition == index && firstPosition == true" class="c-fs16 c-fc-white theme-bg c-ww72 c-hh26 c-flex-row c-flex-center c-pa p-l-1 c-p-t-1 c-br-tl8 c-br-br8">
                      上次学到
                    </div> -->
                  </div>
                  <!-- </template> -->
                  <div v-if="is_courseListPagePrev && dataInfo.items.length < 3" class="c-hh140 c-ww380 c-flex-shrink0"></div>
                </div>
              </div>
              <div @click="popCourseList" class="c-flex-row c-aligni-center c-justify-center c-mt16" v-if="dataInfo.dirCount > 2">
                <span class="c-fs20 c-fc-gray">查看全部目录<span class="iconfont c-fs20 c-ml6">&#xe93b;</span></span>
              </div>
              <loading-status-tem :showLoading="courseListLoading" :noData="!dataInfo.items || dataInfo.items.length == 0" :pt20="true" :noDataText="'老师正在准备内容'"></loading-status-tem>
            </div>
            <template v-if="dataInfo.items && dataInfo.dirCount > 0 && dataInfo.items[currentIndex]">
              <!-- <h2 class="c-ph24 c-fw-n c-fc-xblack c-fs26 c-fw-b c-mt20">{{dataInfo.items[currentIndex].videoName}}</h2> -->
              <div class="c-p" :class="!(dataInfo.hasPermission || (dataInfo.items[currentIndex].allowWholeWatch == 1 && dataInfo.items[currentIndex].isPreview == 1)) || !dataInfo.items[currentIndex].detail ? 'c-hh452 c-text-hidden c-pt24' : ''">
                <div @click="clickDesc" class="c-ph24 course-dir-desc-parent tinymce-text c-lh36 c-fc-sblack c-ww-bw c-wb-ba c-contexty-scroll c-m40" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
                  v-if="dataInfo.items && dataInfo.dirCount > 0 && dataInfo.items[currentIndex]"
                  v-html="dataInfo.items[currentIndex].detail ? dataInfo.items[currentIndex].detail : ''">
                </div>
                <div v-if="!(dataInfo.hasPermission || (dataInfo.items[currentIndex].allowWholeWatch == 1 && dataInfo.items[currentIndex].isPreview == 1))" class="c-w100 c-h c-pa c-p-t0 c-p-l0 c-backdrop-filter-blur20 c-pz1 c-translucent-white50">
                  <div class="c-textAlign-c c-pa c-w100 c-p-t110">
                    <img src="../../../../public/i/wap/course/unable-watch.png" alt="" class="c-hh150 c-ww150 c-m-0auto">
                    <div class="c-fs24 c-pt24 c-textAlign-c c-fc-gray">{{dataInfo.payType == 3 ? '输入密码' : '购买'}}后可看该节简介</div>
                  </div>
                </div>
                <div v-else-if="!dataInfo.items[currentIndex].detail" class="c-w100 c-h c-pa c-p-t0 c-p-l0 c-backdrop-filter-blur20 c-pz1 c-translucent-white50">
                  <div class="c-textAlign-c c-pa c-w100 c-p-t110">
                    <img src="../../../../public/i/wap/course/no-desc.png" alt="" class="c-hh150 c-ww150 c-m-0auto">
                    <div class="c-fs24 c-pt24 c-textAlign-c c-fc-gray">暂无简介</div>
                  </div>
                </div>
              </div>
            </template>
          </template>
          <div v-if="showLearnSign && learningPosition != null && !showSearchDirType" class="c-ww580 c-hh96 c-bg-white c-flex-row c-aligni-center c-box-shadow4 c-br16 c-text-hidden c-pf c-p-b120 c-p-l0 c-p-r0 c-m-0auto c-pz101">
            <img class="c-hh100 c-ww100" :src="$addXossFilter(dataInfo.courseAvatar)" alt="">
            <div class="c-w0 c-flex-grow1 c-pl12 c-pr24 c-pt16 c-hh100">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2 c-lh32">{{dataInfo.items[learningPosition].audioName}}</div>
            </div>
            <div class="c-fs18 c-fc-xblack c-ww110 c-hh42 c-bd1-ccc c-br24 c-flex-row c-flex-center" @click="scrollPosition(1)">继续学习</div>
            <div class="c-fs18 c-fc-gray c-ml24 c-mr20 iconfont" @click="showLearnSign = false">&#xe61b;</div>
          </div>
        </div>
        <div id="commentWrap" :class="typeBar == 2 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 2">
          <commentCom ref="commentCom" v-show="commentStatus == 1" :moduleType="distributionId ? 2 : 1" :prodType="cfrom.course" :prodId="courseId" :bindPhoneSetting="bindPhoneSetting" @getCommentCount="getCommentCount" @handleClickPlaint="handleClickPlaint"></commentCom>
          <div class="c-fs20 c-fc-red c-bg-white c-pf c-p-r0 c-p-b360 c-pv10 c-ph20 c-br36 c-br-br0 c-br-tr0 c-box-shadow" @click="showReport = true;" v-if="isiOS && companyId == 'ldwk'">
            <span class="iconfont c-fs20 c-fc-red c-mr12">&#xe7f6;</span>举报
          </div>
        </div>
        <!-- 相关推荐 -->
        <div :class="typeBar == 4 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 4">
          <!-- 主推商品 -->
          <course-advocate v-if="dataInfo.hasPermission" :dataInfo="dataInfo" @goCenterProduct="goCenterProduct"></course-advocate>
          <!-- 分销商城没有知识套餐和关联 -->
          <template v-if="!distributionId">
            <!-- <package-index-com :showAll="true" :isNewRelatedStyle="true" :proType="1" :proId="courseId" :isHomePage="false" :packageList="dataInfo.combos" v-if="dataInfo && dataInfo.combos.length > 0"></package-index-com> -->
            <!-- <loading-status-tem v-if="relationData==''" :showLoading="true"></loading-status-tem> -->
            <active-and-column v-if="relationData != ''" :styleType="2" :courseList="relationData.courses" :goodsList="relationData.goods" :soicalList="relationData.socials" :examList="relationData.exams"
              :speechList="relationData.speechs" :mutualList="relationData.mutuals" :datumList="relationData.datums" :eBookList="relationData.ebooks" :circleList="relationData.circle"></active-and-column>
            <loading-status-tem
              :pt20="true" :class="!relationData || (relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '') ? 'c-pv160' : ''"
              :noData="!relationData || (relationData.courses == '' && relationData.goods == '' && relationData.socials == '' && relationData.exams == '' && relationData.speechs == '' && relationData.mutuals == '' && relationData.datums == '' && relationData.ebooks == '' && relationData.circle == '')"
              :noDataText="'暂无推荐'"></loading-status-tem>
          </template>
        </div>
        <div class="c-pv30 c-ph24" :class="typeBar == 3 ? (moveDirection == 1 ? 'moveLeft' : moveDirection == 2 ? 'moveRight' : '') : ''" v-show="typeBar == 3">
          <div v-if="dataInfo && dataInfo.circleList && dataInfo.circleList.length > 0"
            class="c-flex-row c-aligni-start c-pt20 c-pb20 c-bd-b1-f5"
            @click="joinCircle"
          >
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
              <img
                :src="$addXossFilter(dataInfo.circleList[0].avatar, require('../../../assets/defult270.png'))"
                class="c-maxh c-maxw imgCloseBig c-br10"
              />
              <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">圈子</div>
            </div>
            <div class="c-pl20 c-flex-grow1">
              <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
                <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{dataInfo.circleList[0].name}}</div>
                <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                  <div>{{dataInfo.circleList[0].memberCount}}人参与</div>
                  <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="c-flex-row c-aligni-start c-pt20 c-pb20"
            v-for="(item, index) in relatedList" :key="index" :class="index == relatedList.length - 1 ? '' : 'c-bd-b1-f5'"
            @click="goRevlantDetail(item.mainProdType, item.id,item)"
          >
            <div class="c-ww180 c-hh120 c-flex-row c-flex-center c-br10 c-flex-shrink0 c-p">
              <img
                :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))"
                class="c-maxh c-maxw imgCloseBig c-br10"
              />
              <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">{{item.mainProdType == 111 ? '打卡' : prodTypes[item.mainProdType]}}</div>
            </div>
            <div class="c-pl20 c-flex-grow1">
              <div class="c-flex-column c-justify-sb imgSocailDiv c-hh120">
                <div class="c-fs24 c-fc-xblack c-fw400 c-text-ellipsis2">{{item.name}}</div>
                <div class="c-fs26 c-fc-gray c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fs22">{{item.mainProdType != 111 || (item.mainProdType == 111 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41)))) ? (item.number + '人参与') : ''}}</div>
                  <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </template>
    <section v-show="commentStatus == 1 && typeBar == 2" @click="addComment()" class="c-ph24 c-bg-white c-hh88 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b0 c-pz9 c-box-shadow5">
      <div class="c-hh60 c-w0 c-flex-grow1 c-lh64 c-textAlign-c c-fs24 c-ph20 c-fc-gray c-bg-f2 c-br30"> 请输入评论内容</div>
    </section>
    <section @click="goToTop" v-show="dataInfo.hasPermission && showBottomPlayer" class="c-ph24 translucent-white95 c-hh72 c-aligni-center c-flex-row c-pf c-w100 c-maxw640 c-p-b88 c-pz99 box-shadow-player">
      <div class="c-pl100 c-w100 c-h c-p">
        <div class="c-pa c-p-l0 p-t-14 c-br10 c-bd2-white">
          <img class="c-hh64 c-ww64 c-br10" :src="$addXossFilter(dataInfo.courseAvatar)" alt="">
          <img class="c-hh52 c-ww52 c-pa p-t6 r-14 c-pz-1 cover-rotate" :src="$addXossFilter(require('@/assets/i/wap/course/changpian.png'))" alt="">
        </div>
        <div class="c-flex-row c-aligni-center c-h">
          <div class="c-w0 c-flex-grow1 c-text-ellipsis1 c-fs24 c-fc-xblack c-pr40">{{dataInfo && dataInfo.items[currentIndex] && dataInfo.items[currentIndex].audioName ? dataInfo.items[currentIndex].audioName : ''}}</div>
          <div class="c-ww44 c-hh44" @click.stop="clickBottomPlayer">
            <x-circle
              :percent="timePercent"
              :stroke-width="6"
              :trail-width="6"
              stroke-color="#333333"
              trail-color="#ececec">
              <span class="c-fs26 c-fc-xblack iconfont c-p p-t-2" :class="playStatus == 1 ? '' : 'p-r-1'">{{playStatus == 1 ? '&#xe7b6;' : '&#xe74f;'}}</span>
            </x-circle>
          </div>
        </div>
      </div>
    </section>
    <div v-if="showItemDetail" class="c-pf c-p-b0 c-w100 c-maxw640 c-pz101 c-bg-white c-box-shadow9 c-bd-t1 c-br-tl36 c-br-tr36">
      <div class="c-hh400 c-contexty-scroll c-p">
        <div class="c-fs28 c-fc-xblack c-textAlign-c c-pt28">单节详情</div>
        <div class="c-mt28 c-textAlign-l c-ph32 c-content-auto">
          <div @click="clickDesc" class="course-dir-desc-parent tinymce-text c-lh36 c-fc-sblack c-ww-bw c-wb-ba c-contexty-scroll c-fs24 c-fc-sblack" :class="[cfg.isCopyPicture == 0 ? 'closeBig' : 'aCloseBig', cfg.isCopy == 0 ? 'copyNot' : '']"
            v-if="dataInfo.dirCount > 0"
            v-html="dataInfo.items[showItemDetailIndex] && (dataInfo.hasPermission || (dataInfo.items[showItemDetailIndex].allowWholeWatch == 1 && dataInfo.items[showItemDetailIndex].isPreview == 1)) ? (dataInfo.items[showItemDetailIndex].detail ? dataInfo.items[showItemDetailIndex].detail : '暂无简介') : '购买后可看'">
          </div>
        </div>
        <div @click="showItemDetail = false" class="iconfont c-fs24 c-pa c-fc-gray c-p-t32 c-p-r24">&#xe61b;</div>
      </div>
      <div @click="showItemDetail = false" class="c-fs22 c-fc-white c-ww220 c-hh50 c-lh54 c-center c-br25 c-mb24 c-mt40 theme-bg-gradient c-textAlign-c">返回目录</div>
    </div>
    <!-- 圈子学习计划跳转-目录导航 -->
    <circle-learn-nav :planId="circleQuery.planId" :circleId="circleQuery.circleId"></circle-learn-nav>
    <AppComplain :showReport.sync="showReport" />
    <!-- <more-device :hasBottomBar="hasBottomBar" :prodInfo="{prodType: cfrom.course, prodId: courseId, courseType: 1, name: dataInfo.name}" v-if="!$isWxApp() && isWeChat && dataInfo.hasPermission && cfg && cfg.enableMultiLearning == 1 && (cfg.multiLearningPage & 1) == 1 && cfg.multiLearningType > 1 && typeBar == 0"></more-device> -->
    <!--没权限 || 非分销并且开通邀请卡 || 需要展示赠送好友，底部肯定有显示内容 -->
    <bottom-buy-com
      v-if="hasBottomBar"
      ref="bottomBuy" :isNeedPay="!dataInfo.hasPermission && dataInfo.payType == 2" :showCommentBtn="showCommentBtnComputed" :columnPermission="columnPermission" :isGroupPurchase="styleType == 2 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments != 1"
      :ckFrom="ckFrom" :showShareMoneyTip="showShareMoneyTip" :showNotSale="dataInfo.isSaleOut == 0 && !dataInfo.hasPermission&&dataInfo.payType!=3" :notSale="dataInfo.isSaleOut == 0" :tryStudy="styleType == 2 && dataInfo.dirCount > 0 && dataInfo.items[0] && dataInfo.items[0].isPreview == 1 && dataInfo.hasPermission == false && (dataInfo.items[0].watchPermission == 1 || dataInfo.items[0].allowWholeWatch == 1)"
      :deductibleAfterInvition="dataInfo.commission" :showPresentFriend="styleType == 2 ? false : dataInfo.showPresentFriend"
      :showBuyButton="dataInfo.showBuyButton" :showFriendHelper="dataInfo.showFriendHelper" :friendHelperStatus="faStatus" :showFormText="showFormText" :isNew="true" :barLeftStatus="bottomBuyDirection" :isSaleTogether="dataInfo.isSaleTogether == 1 ? true : false"
      :nextLessons="nextLessons" :prevLessons="prevLessons" :extColumnId="fromColumnId" :isOffSale="isOffSale" :hasExpired="hasExpired" :showFirstScroll="showFirstScroll" :isDistribution="distributionId != '' && distributionId != undefined && distributionId != null ? true : false"
      :timingPutOn="timingPutOn" :delayTime="dataInfo.delayTime" @clickBuyNow="clickBuyNow" @spreadInvite="inviteFriends" @invitePoster="invitePoster" @goHelpDetail="goHelpDetail" @goFormDetail="studyGoForm" @goColumnCourse="goColumnCourse" @goToTop="goToTop" @putOn="putOn" @closeFirstScroll="closeFirstScroll" @clickComment="clickCommentBtn"
      @popColumnList="popColumnList" :extCampId="ttId" :campButtonStatus="campButtonStatus" @handleCampDirectory="handleCampDirectory" @groupPurchase="showGpModal=true;" @tryStudy="toTryStudy"
    >
      <slot>
        <div v-if="isStoreUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 c-bg-ccc">仅指定组织成员可{{dataInfo.payType == 2 ? '购买' : '观看'}}</div>
        </div>
        <div v-else-if="isUserGroup" class="c-fs28 c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1 c-bg-ccc">仅指定用户可{{dataInfo.payType == 2 ? '购买' : '观看'}}</div>
        </div>
        <div v-else :class="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments != 1 ? 'c-fs26' : 'c-fs28'" class="c-lh c-w0 c-flex-grow1 c-flex-row btn-wrap">
          <div v-if="styleType == 1 && dataInfo.enterpriseGroup && dataInfo.payType == 2 && dataInfo.isUserGroup != 1 && dataInfo.isDepartments != 1" @click="showGpModal=true;" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">团购</div>
          <!-- 营销活动并且不关联专栏的时候（不用展示所属专栏和返回专栏），则把营销活动的按钮分开展示 -->
          <template
            v-if="!dataInfo.hasPermission &&
              (((ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1)) ||
                (!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null) ||
                (dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)))"
          >
            <div v-if="!((ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1)" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1" @click="clickBuyNow">
              <span class="c-fs24">{{getBuyBtnTitle}}</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{calculationPrice}}</span>
            </div>
            <div v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">
              拼团中...
            </div>
            <div v-else-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1" @click="goBuy(-1,dataInfo.collage.collageId)" :class="dataInfo.collage.status == 1 ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">发起拼团</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.collage.captainPrice).toFixed(2)}}</span>
            </div>
            <div v-else-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null" @click="goHelpDetail" :class="faStatus == 2 ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">灌溉领取</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}0.00</span>
            </div>
            <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2) && dataInfo.bargain.userType == 1" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" class="c-hh64 c-flex-row c-flex-center c-pt4 c-w0 c-flex-grow1">
              正在砍价
            </div>
            <div v-else-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)" @click="handleClickBargainDetail(dataInfo.bargain.bargainId)" :class="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? 'c-bg-ccc' : 'theme-bg-gradient'" class="c-hh64 c-flex-column c-flex-center c-pt4 c-w0 c-flex-grow1">
              <span class="c-fs24">砍价享</span>
              <span class="c-lh c-fs24 c-mt4">{{'￥' | iosPriceFilter}}{{Number(dataInfo.bargain.reservePrice).toFixed(2)}}</span>
            </div>
          </template>
          <!-- 专栏下再不展示购买等按钮，统一引导到专栏去购买 -->
          <template v-else>
            <div class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" v-if="!dataInfo.hasPermission && dataInfo.isSaleTogether == 1 && Number(fromColumnId) == -1" @click="backPackage()">所属课程</div>
            <div v-if="(dataInfo.isSaleTogether == 1 || (distributionId != '' && distributionId != undefined && distributionId != null)) && Number(fromColumnId) != -1 && !columnPermission" @click="goColumn()" class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1">{{(distributionId != '' && distributionId != undefined && distributionId != null) ? '返回专栏' : '订阅专栏'}}</div>
            <template v-if="!dataInfo.hasPermission && dataInfo.isSaleOnly == 1">
              <div
                v-if="dataInfo.bargain == null && dataInfo.isSaleOnly == 1 && dataInfo.payType == 2 && (!dataInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) && (ckFrom == cfrom.course || ckFrom == cfrom.column)"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
              >
                {{ckFrom == cfrom.course ? '立即购买' : (ckFrom == cfrom.column && dataInfo.isFreeInColumn == 2 ? '购买单课' : '专栏')}}
              </div>
              <div
                v-if="dataInfo.bargain == null && dataInfo.isSaleOnly == 1 && dataInfo.payType == 3 && (!dataInfo.isFriendHelper || companyAuth.enableFriendHelper == 0) && (ckFrom == cfrom.course || ckFrom == cfrom.column)"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="inputPsw"
              >
                {{ckFrom == cfrom.course ? '输入密码' : (ckFrom == cfrom.column && dataInfo.isFreeInColumn == 2 ? '输入密码' : '专栏')}}
              </div>
              <div
                v-if="(ckFrom == cfrom.flashSalesCourse || ckFrom == cfrom.flashSalesColumn) && !dataInfo.hasPermission"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="clickBuyNow"
              >
                {{optimal ? getBuyBtnTitle : '立即抢购'}}
              </div>
              <div
                v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && dataInfo.collage.status == 2 && dataInfo.collage.userType != -1"
                class="c-hh64 c-flex-row c-flex-center c-w0 c-flex-grow1" @click="goCollageDetail(dataInfo.collage.groupId,dataInfo.collage.collageId)"
              >
                拼团中...
              </div>
              <div
                v-if="(ckFrom == cfrom.collageCourse || ckFrom == cfrom.collageColumn) && dataInfo.collage != null && (dataInfo.collage.status == 2 || dataInfo.collage.status == 1) && dataInfo.collage.userType == -1"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                购买
                <marketing-buy-btn
                  :isCollage="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :marketingPrice="Number(dataInfo.collage.captainPrice).toFixed(2)"
                  :btnActivate="dataInfo.collage.status == 1 ? false : true"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="goBuy(-1,dataInfo.collage.collageId)">
                </marketing-buy-btn>
              </div>
              <div
                v-if="!distributionId && companyAuth.enableFriendHelper == 1 && dataInfo.isFriendHelper && ckFrom == cfrom.course && dataInfo.collage == null"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                灌溉领取
                <marketing-buy-btn
                  :isFriendHelp="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :btnActivate="faStatus == 2 ? true : false"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="goHelpDetail">
                </marketing-buy-btn>
              </div>
              <div
                v-if="dataInfo.bargain != null && ((dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) || dataInfo.bargain.status == 2)"
                class="c-hh64 c-flex-row c-flex-center c-p c-w0 c-flex-grow1" @click.stop="popMarketingBuy"
              >
                购买
                <marketing-buy-btn
                  :isBargain="true"
                  :showMarketingBuyBtn="showMarketingBuyBtn"
                  :calculationPrice="calculationPrice"
                  :marketingPrice="Number(dataInfo.bargain.reservePrice).toFixed(2)"
                  :btnActivate="(dataInfo.bargain.status == 1 && dataInfo.bargain.isPreheat == 1) ? false : true"
                  :isBargaining="dataInfo.bargain.userType == 1 ? true : false"
                  @clickBuyNow="clickBuyNow"
                  @marketingBuy="handleClickBargainDetail(dataInfo.bargain.bargainId)">
                </marketing-buy-btn>
              </div>
            </template>
          </template>
        </div>
      </slot>
    </bottom-buy-com>
    <group-guidance ref="guidance" position="bottom" :isType="true" :groupObject="dataInfo.guideData"></group-guidance>
    <share-masker :isShowShare="isShowShare" v-if="isShowShare" @closeShare="isShowShare=false;"></share-masker>
    <show-integrate :showIntegrate="showIntegrate" :integrateCount="integrateCount" v-if="showIntegrate" @closeShareInt="showIntegrate=false;"></show-integrate>
    <!-- 专栏关联课程 -->
    <relate-column-list :columnPermission="columnPermission" :showColumnList="showColumnList" :dataInfo="dataInfo" :courseId="courseId" :extColumnId="extColumnId" :distributionId="distributionId" :learningPosition="is_courseListPagePrev ? learningPolesition % 10 : learningPolesition"
      :isInitData="isInitData" :currentIndex="currentIndex" :columnCourseIndex="columnCourseIndex" :playStatus="playStatus"
      @hideColumnList="hideColumnList" @clickClassItem="clickClassItem" @goColumnCourse="goColumnCourse">
    </relate-column-list>
    <open-modal class="c-pz10000" :openModal='showCourseList' @closeModal='showCourseList = false'>
      <div class="c-bg-white c-bd-t1 c-br-tl20 c-br-tr20">
        <div class="c-ph24 c-flex-row c-justify-sb c-aligni-center c-pt20">
          <div class="c-flex-row c-justify-sb c-hh48 c-aligni-center c-flex-grow1">
            <div class='c-flex-row c-aligni-end'>
              <div class="c-fc-xblack c-fs26 c-fw-b">选节</div>
              <span class="c-fs20 c-fc-gray c-fw-n c-ml10" v-if="dataInfo.dirCount && dataInfo.dirCount != '' && dataInfo.dirCount != null ">共{{dataInfo.dirCount}}节</span>
            </div>
          </div>
          <div @click='hideCourseList' class="c-hh48 c-ww48 c-flex-row c-aligni-center c-justify-end">
            <span class="c-fs20 iconfont">&#xe61b;</span>
          </div>
        </div>
        <div class="c-contexty-scroll c-maxh500" id="scrollCourse1">
          <div class="c-bg-white c-ph24 c-pb30 min-height101">
            <div v-if="is_courseListPagePrev" @click="getCourseList(1)" class="c-fs22 c-fc-sgray c-textAlign-c c-pt24">加载更多</div>
            <div class="c-p" id="scrollCourse1Wrap">
              <template v-for="(item,index) in dataInfo.items">
                <div :key="item" v-if="item.chapterId && item.chapterSort == 1" @click="hideChaptList(item, index)" :class="item.showStatus == 'hide' ? 'c-bd-b1-f6' : ''" class="c-pv28 c-p">
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-w0 c-flex-grow1 c-fs26 c-fc-xblack c-fw600 c-text-ellipsis2">{{ item.parentName }}(共{{ item.cnt }}节)</div>
                    <div class="c-pl32 iconfont c-fs24 c-fc-gray">{{ item.showStatus == 'hide' ? '&#xfbcd;' : '&#xe67a;'}}</div>
                  </div>
                </div>
                <div class="c-pb18 c-pt28 c-p chapt-item" :class="!item.chapterId || item.cnt == item.chapterSort ? 'c-bd-b1-f6' : ''" v-show="item.showStatus != 'hide'" :key="index" @click="seeVoice(index)">
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-w0 c-flex-grow1">
                      <div class="c-flex-row c-aligni-center">
                        <div class="c-fs24 c-text-ellipsis2 c-w0 c-flex-grow1">
                          <span v-if="item.isPreview == 1 && dataInfo.hasPermission == false && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                            试学{{item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0) ? ((item.watchTime > 0 ? item.watchTime + '分钟' : '') + (dataInfo.watchTimeSeconds > 0 ? dataInfo.watchTimeSeconds + '秒' : '')) : ''}}
                          </span>
                          <span v-else-if="distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false" class="c-inlineblack c-br12 c-textAlign-c c-fs16 c-ph10 c-pv6 theme-bg-10 theme-fc c-fw-b c-mr8 c-mb6">
                            试学
                          </span>
                          <div v-if="currentIndex == index" :class="playStatus == 1 ? '' : 'stop-animation'" class="c-vcAlign-middle c-inlineblack line-scale-pulse-out2 c-flex-row c-p c-mr10">
                            <div class="theme-bg c-inlineblack"></div>
                            <div class="theme-bg c-inlineblack"></div>
                            <div class="theme-bg c-inlineblack"></div>
                            <div class="theme-bg c-inlineblack"></div>
                          </div>
                          <span :class="currentIndex == index ? 'c-fw600 theme-fc' : 'c-fw-n c-fc-xblack'" class="c-wordBreakAll c-vcAlign-middle">{{item.audioName}}</span>
                        </div>
                        <div class="c-fc-sgray iconfont c-fs24 c-pl32"
                          v-if="dataInfo.hasPermission == false &&
                            !(item.isPreview == 1 && ((item.watchPermission == 1 && (item.watchTime > 0 || item.watchTimeSeconds > 0)) || item.allowWholeWatch == 1)) &&
                            !(distributionId && index == 0 && dataInfo.allowWholeWatch == 1 && dataInfo.hasPermission == false)"
                        >&#xe8bc;
                        </div>
                      </div>
                      <div :class="currentIndex == index ? 'theme-fc' : 'c-fc-gray'" class="c-mt16">
                        <div class="c-flex-row c-aligni-center">
                          <div class="iconfont c-fs20 c-fc-gray c-mr10">&#xe70f;</div>
                          <div v-if="currentIndex == index && playStatus == 1" class="c-fs20 c-fc-gray c-mr20">正在播放</div>
                          <div v-else-if="item.progressRatio == 1"
                            class="c-fs20 c-fc-gray c-mr20">已完成</div>
                          <div v-else
                            class="c-fs20 c-fc-gray c-mr20">{{(item.progressRatio && item.progressRatio > 0) ? ('已学' + Number(100 * item.progressRatio).toFixed(0) + '%') : '未学习'}}</div>
                          <div v-if="learningPosition == index && firstPosition == true" class="c-fs20 c-ph8 c-hh36 c-lh36 theme-bg-10 theme-fc c-br10">上次学到</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <loading-status-tem :showLoading="courseListLoading" :noMoreData="!is_courseListPage && (dataInfo.items && dataInfo.items.length > 0)" :noData="!dataInfo.items || dataInfo.items.length == 0" :pt20="true" :noDataText="'老师正在准备内容'"></loading-status-tem>
            <div v-if="is_courseListPage" @click="getCourseList()" class="c-fs22 c-fc-sgray c-pv24 c-textAlign-c">点击加载更多</div>
          </div>
          <div class="c-pv8 c-ph20 c-bg-white c-br-tl40 c-br-bl40 c-box-shadow7 c-pa c-p-r0 c-p-b100" v-show="showLearnSign1 && learningPosition != null">
            <div class="c-fs20 theme-fc" @click="scrollPosition(2)">
              <span class="iconfont c-fs24 c-mr12">&#xe90f;</span>{{firstPosition == true ? '回到上次学习' : '回到当前学习'}}
            </div>
          </div>
        </div>
      </div>
    </open-modal>
    <open-modal class="c-pz10000" :openModal='popRelateCourse' @closeModal='popRelateCourse = false'>
      <div class="c-bg-white c-pv30 c-ph24 c-br-tl20 c-br-tr20">
        <div class="c-fs26 c-fc-sblack c-fw600">搭配学习</div>
        <div class="c-maxh500 c-minh110 c-mt32 c-contexty-scroll">
          <div class="c-flex-row c-hh100 c-aligni-center" :class="index+1 == relatedList.length ? '' : 'c-mb20'" v-for="(item, index) in relatedList" :key="index"
            @click="goRevlantDetail(item.mainProdType, item.id,item)">
            <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
              <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh24">{{item.mainProdType == 111 ? '打卡' : prodTypes[Number(item.mainProdType)]}}</div>
              <img :src="$addXossFilter(item.cover)" alt="">
            </div>
            <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-fs24 c-fw400 c-flex-column c-justify-sb">
              <p class="c-text-ellipsis2">{{item.name}}</p>
              <p v-if="item.mainProdType != 111 || (item.mainProdType == 111 && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(41))))" class="c-fs18 c-fc-gray">{{item.number}}人参与</p>
            </div>
            <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">加入</div>
          </div>
        </div>
      </div>
    </open-modal>
    <coupon-list-com
      @closeModal="showCoupon = false"
      @getCouponList="getCouponList"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :prodId="Number(courseId)"
      :prodType="5"
      :dataInfo="dataInfo"
      :chainInfo="chainInfo"
      :isMarketing="isMarketing"
    >
    </coupon-list-com>

    <!-- 显示购买赠送积分 -->
    <point-gift :showPoints.sync="showPoints" :prodId="courseId" :rewardPoints="rewardPoints"></point-gift>

    <!-- 推荐有礼 -->
    <recommend-present ref="recommendPresent"></recommend-present>
    <cj-popup v-model="showTryEnd" class="c-bg-transparent">
      <div :class="cfg && cfg.enableWatchQrcode == 1 ? 'c-pt48 c-pb48' : 'c-pv40'" class="c-bg-white c-br20 c-p c-ww520">
        <template v-if="cfg && cfg.enableWatchQrcode == 1">
          <div class="c-fc-sxblack c-fs28 c-textAlign-c c-fw-b">试听结束，您可选择以下方式继续</div>
          <div v-if="cfg.wtQrcodeTitle" class="theme-fc c-fs24 c-textAlign-c c-mt36">{{cfg.wtQrcodeTitle}}</div>
          <div class="c-ww250 c-hh250 c-text-hidden c-mlr-auto c-mt20">
            <img v-if="cfg.wtQrodeImg" class="c-center c-ww250" :src="$addXossFilter(cfg.wtQrodeImg, require('@/assets/defult270.png'))" alt="">
          </div>
          <div class="c-fs20 c-fc-xblack c-textAlign-c c-mt36">或者</div>
          <div v-if="dataInfo && dataInfo.isSaleOnly == 0" @click="backPackage()" class="c-fs24 theme-fc theme-bd1 c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
          >{{'立即购买' | iosPayText(ckFrom)}}</div>
          <div v-else-if="dataInfo.payType!=3" @click="clickBuyNow" class="c-fs24 theme-fc theme-bd1 c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
          >{{'立即购买此课程' | iosPayText(ckFrom)}}</div>
          <div v-else @click="inputPsw" class="c-fs24 theme-fc theme-bd1 c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
          >{{'立即输入此课程密码'}}</div>
        </template>
        <template v-else>
          <div class="c-fc-sblack c-fs24 c-textAlign-c c-fw-b">提示</div>
          <div class="c-fc-gray c-fs24 c-textAlign-c c-mt32">试听结束，{{dataInfo.payType!=3?'购买':'输入密码'}}查看完整内容</div>
          <div v-if="dataInfo && dataInfo.isSaleOnly == 0" @click="backPackage()" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'立即购买' | iosPayText(ckFrom)}}</div>
          <div v-else-if="dataInfo.payType!=3" @click="clickBuyNow" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'立即购买' | iosPayText(ckFrom)}}</div>
          <div v-else @click="inputPsw" class="c-fs24 c-fc-white c-pv10 c-ww300 c-hh60 c-mt32 c-flex-row c-flex-center c-mlr-auto c-br30"
            :style="'background:linear-gradient(90deg,rgba(' + cloroRGB + ',1) 0%,rgba(' + cloroRGB + ',0.5) 100%)'">{{'输入密码'}}</div>
        </template>
        <div v-if="cfg && cfg.enableWatchQrcode == 1" @click="closeTryEnd" class="c-pa iconfont c-fs20 c-fc-gray c-p-t16 c-p-r16">&#xe61b;</div>
      </div>
      <div v-if="!(cfg && cfg.enableWatchQrcode == 1)" @click="closeTryEnd" class="iconfont c-fc-white c-fs44 c-mt32 c-textAlign-c">&#xe84e;</div>
    </cj-popup>
    <cj-popup v-model="freeWatch" class="c-bg-transparent">
      <div class="free-watch-bg c-br20 c-p c-text-hidden c-ww480">
        <div class="c-ww200 c-hh200 c-text-hidden c-mlr-auto c-mt240">
          <img class="c-center c-ww200" :src="$addXossFilter(qrImg, require('@/assets/defult270.png'))" alt="">
        </div>
        <div class="c-fs20 c-fc-white c-textAlign-c c-mt80">长按识别二维码识别权益</div>
      </div>
      <div @click="freeWatch = false" class="iconfont c-fc-white c-fs44 c-mt32 c-textAlign-c">&#xe84e;</div>
    </cj-popup>
    <cj-popup v-model="showChoosePlayIndex" @closed="confirmChooseToPlay" class="c-w80" round>
      <div class="c-pv36 c-ph30">
        <div class="c-fs32 c-fc-xblack c-fw500">选择学习章节</div>
        <div class="c-fs22 c-fc-xblack c-fw400 c-mt28 c-textAlign-l c-lh36 c-wb-ba">您正在学习《{{dataInfo.name}}》，请选择您想要继续学习的章节</div>
        <div @click="chooseIndex(1)" v-if="goIndexName" class="c-fs24 c-pv20 c-ph24 c-lh36 c-mt32 c-br10 c-p" :class="chooseToPlay == 1 ? 'theme-bd1 c-bg-white theme-fc' : ' c-fc-xblack c-bg-sgray c-bd1-f5'">
          {{goIndexName}}
          <div class="c-fs18 theme-fc c-pa pl-8 pt-15 c-bg-white c-box-shadow7 c-ph10 c-hh30 c-lh32 c-br-tr24 c-br-br24">当前学</div>
        </div>
        <div @click="chooseIndex(2)" v-if="learningPositionName" class="c-fs24 c-pv20 c-ph24 c-lh36 c-mt32 c-br10 c-p" :class="chooseToPlay == 2 ? 'theme-bd1 c-bg-white theme-fc' : ' c-fc-xblack c-bg-sgray c-bd1-f5'">
          {{learningPositionName}}
          <div class="c-fs18 c-fc-xlred c-pa pl-8 pt-15 c-bg-white c-box-shadow7 c-ph10 c-hh30 c-lh32 c-br-tr24 c-br-br24">上次学到</div>
        </div>
        <div @click="confirmChooseToPlay" class="c-fc-white c-fs24 theme-bg-gradient c-ww320 c-hh60 c-mt40 c-mlr-auto c-br30 c-flex-row c-flex-center">我选好了</div>
      </div>
    </cj-popup>
    <related-combo :showType="relateShowType" :distributionId="distributionId" @closeCombo="closeCombo" @getMore="getMore" :showCombo="showCombo" :trainingMore="is_page_training" :packageMore="is_page_package" :columnMore="is_page_column"
      :packageList="belongPackageList" :training="training" :columnList="belongColumnList" :circleList="relateCircleList"></related-combo>
    <offical-account v-if="dataInfo && dataInfo.bargain" :showAccountQcode="showAccountQcode" :desc="officalDesc" :imgSrc="$addXossFilter(mpQrcode)" @hideDialog="hideDialog"></offical-account>
    <comfirm-com :pwTip="''" :showPassword="showPassword" :noticeText="noticeText" :text="'请输入密码'" :placeholderText="'请输入密码'" @changePsw="changePsw" @closePassword="showPassword = false" @submitPassword="submitPassword"></comfirm-com>
    <not-support-play ref="notSupportPlay"></not-support-play>
    <group-purchase-modal ref="gpModal" @groupPurchasePay="groupPurchasePay" @colseModal="colseModal" v-show="showGpModal"></group-purchase-modal>
    <recommend-award v-if="dataInfo.recommend && dataInfo.recommend.isExist" :action="dataInfo.recommend && dataInfo.recommend.action"></recommend-award>
    <gift-modal :hasBuy="dataInfo.hasPermission" :showGiftModal="popGift || popRelatesDatum" :fromCourseId="courseId" :popType="popType" :prodList="popType == 1 ? (dataInfo.giftRelates ? dataInfo.giftRelates : []) : popType == 2 ? (dataInfo.relateDatumArr ? dataInfo.relateDatumArr : []) : []" @closeGift="closeGiftModal"></gift-modal>
    <promote-income v-if="dataInfo && dataInfo.isSaleOut != 0 && (dataInfo.showInvitionCard || dataInfo.showMarketingCard)" :prodId="courseId" :prodType="cfrom.course" :showInvitionCard="dataInfo.showInvitionCard" :showMarketingCard="dataInfo.showMarketingCard" @goInvite="inviteFriends" @goMarketingPoster="invitePoster"></promote-income>
    <learn-cer :isReceivedStudy="isReceivedStudy" ref="learnCerCom" :bigType="1"></learn-cer>
    <!-- 入学证书 -->
    <enrol-cer :isReceivedStudy="isReceivedBuy" ref="enrolcerCom" :bigType="2"></enrol-cer>
    <!-- 课程关联的训练营目录 -->
    <camp-directory-dialog v-if="ttId && ttId > 0" ref="campDirectory"></camp-directory-dialog>
    <!-- 关联售卖相关目录 -->
    <open-modal :openModal='showPackageList' @closeModal='showPackageList = false'>
      <package-list-tmp :isTemplate="true" ref="packageList"></package-list-tmp>
    </open-modal>
    <collage-grades ref="collageGrades" :relTyp="2" :refereeId="refereeId" :isRelForm="dataInfo.isRelForm && !dataInfo.hasFormLog" :extId="extId" :bindPhoneSetting="bindPhoneSetting" :goodsRoomId="goodsRoomId" :recRelateId="recRelateId" :recType="recType" :dataInfo="dataInfo"></collage-grades>
  </div>
</template>

<script>
/* eslint-disable */
import { XCircle } from 'ckjrweb-mp-ui/src/components/index';
import shareMasker from "@/components/templates/common/shareMasker.vue";
import showIntegrate from "@/components/templates/common/showIntegrate.vue";
import commentCom from "@/components/templates/common/commentCom.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import ActiveAndColumn from "@/components/templates/activeAndColumn.vue";
import PackageIndexCom from "@/components/templates/packageIndexCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import AudioCom from "@/components/templates/common/audio/AudioCom.vue";
import OpenModal from "@/components/templates/common/openModal.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import { utilJs, wxUtilJs } from "@/utils/common.js";
//import wx from "weixin-js-sdk";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import recommendPresent from '@/components/templates/recommendPresent';
import DiscountTip from "@/components/templates/common/discountTip.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import groupGuidance from '@/components/templates/common/groupGuidance.vue'
import relatedCombo from '@/components/templates/relatedCombo'
import couponListCom from "@/components/templates/couponListCom.vue";
import PriceBar from '@/components/templates/common/priceBar.vue';
import bargainRules from '@/components/templates/bargain/bargainRules';
import officalAccount from '@/components/templates/common/officalAccount';
import buyInforswiper from '@/components/templates/buyInforswiper';
import courseDescription from '@/components/templates/courseDescription';
import ComfirmCom from "@/components/templates/common/comfirmCom.vue";
import MarketingBuyBtn from "@/components/templates/common/marketingBuyBtn.vue";
import notSupportPlay from "@/components/templates/common/notSupportPlay.vue";
import CollectBtnCom from "@/components/templates/common/collectBtnCom.vue";
import groupPurchaseModal from "@/components/templates/common/groupPurchaseModal.vue";
import RecommendAward from "@/components/member/recommend/recommendAward.vue";
import courseAdvocate from '@/components/templates/courseAdvocate';
import giftModal from '@/components/templates/giftModal';
import collocationBuyCom from '@/components/templates/collocationBuyCom';
import { goDetails } from "@/utils/goDetails.js"
import { decrypt } from "@/utils/aesTool.js";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import circleLearnNav from '@/components/templates/circle/learnNav.vue';
import PromoteIncome from '@/components/templates/common/promoteIncome.vue';
import validTimeCom from "@/components/templates/common/validTimeCom.vue";
import learnCer from "@/components/templates/learnAndachCer/learnCer.vue";
import enrolCer from "@/components/templates/learnAndachCer/enrolCer.vue";
import RelateColumnList from "@/components/templates/common/relateColumnList.vue"
import campDirectoryDialog from "@/components/templates/common/campDirectoryDialog.vue";
import DiscountInfo from "@/components/templates/common/discountInfo.vue";
import VipEntry from "@/components/templates/common/vipEntry.vue";
import CourseMoreBtn from "@/components/templates/common/courseMoreBtn.vue";
import InviteGroup from "@/components/templates/common/inviteGroup.vue";
import PackageListTmp from '@/components/templates/packageListTmp.vue';
import LecturerCom from "@/components/templates/common/lecturerCom.vue";
import formEntry from "@/components/homePage/form/formEntry.vue"
import MoreDevice from "@/components/templates/moreDevice.vue"
import collageGrades from "@/components/templates/collage/collageGrades.vue";
import AppComplain from "@/components/templates/common/appComplain.vue"
import pointGift from "@/components/templates/common/pointGift.vue";
import { mapState } from 'vuex';
let msgLineHeight = 20;
let inputScrollTop = 0;
let curPlayTime = 0;//当前播放时间
let gettingCoupon = false;
let totalTime = 0;
let playedDuration = 0; //某个音频累计播放时长
// let playedTimmer = null;
let startSt = 0;
let endSt = 0;
let previewTimmer = null;
let isFromPathColumn = false;
let isClick = false;
let lastScroll = 0;
let isFirstRequistList = true;
let isFromPrevEnd = false;
let updateTime = 0;
const THEME_RGB_MAP = global.THEME_RGB_MAP;
export default {
  name: "Voice",
  components: {
    formEntry,
    shareMasker,
    showIntegrate,
    commentCom,
    loadingStatusTem,
    ActiveAndColumn,
    PackageIndexCom,
    FlashSalesTimeNew,
    AudioCom,
    OpenModal,
    MySmallTabbar,
    VipCustomImg,
    recommendPresent,
    DiscountTip,
    CollagePersonsList,
    BottomBuyCom,
    groupGuidance,
    relatedCombo,
    couponListCom,
    PriceBar,
    bargainRules,
    officalAccount,
    buyInforswiper,
    courseDescription,
    ComfirmCom,
    MarketingBuyBtn,
    XCircle,
    notSupportPlay,
    CollectBtnCom,
    groupPurchaseModal,
    RecommendAward,
    courseAdvocate,
    giftModal,
    circleLearnNav,
    collocationBuyCom,
    PromoteIncome,
    validTimeCom,
    learnCer,
    enrolCer,
    RelateColumnList,
    campDirectoryDialog,
    DiscountInfo,
    VipEntry,
    CourseMoreBtn,
    InviteGroup,
    PackageListTmp,
    LecturerCom,
    MoreDevice,
    collageGrades,
    AppComplain,
    pointGift
  },
  props: [],
  data() {
    return {
      prodTypes: global.prodMapType,
      audioMp3Src: "",
      audioM3u8Src: "",
      audioTitle: '',
      pointsOnBuyingAudio: localStorage.getItem("pointsOnBuyingAudio") || 0,
      distributionId: "", //分销id
      showIntegrate: false, //获取积分提示
      integrateCount: 0,
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      customPointName: localStorage.getItem("customPointName"),
      companyId: window.localStorage.getItem("companyId") || '',
      enableBuyedInfoSwiper: JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper?JSON.parse(localStorage.getItem("cfg")).enableBuyedInfoSwiper:0,
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      cfrom: global.ckFrom,
      isShowShare: false,
      isShowPresent: false,
      extId: -1, //代表是分类进来的，还是专栏进来的
      ckFrom: global.ckFrom.course,
      is_page: false,
      page: 1,
      limit: 10,
      currentIndex: 0,
      courseId: "",
      relationData: "",
      isShowPay: false,
      dataInfo: "",
      integralInfo: true,
      countTime: 0,
      interval: null,
      playType: 0, //0无播放类型，1顺序播放，2单曲循环播放
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      isShowFormlg:localStorage.getItem("showForm") == 1 ? true : false,
      tabList: [{
        title: '详情',
        index: 0,
      }, {
        title: '目录',
        index: 1,
        smallText: ''
      }],
      typeBar: 0,
      onePage: 1,
      is_onePage: false,
      tabhBarFixed: false,
      showReport: false, //ios app举报
      isiOS: false,
      pathFrom: "", //上级路径
      hasShowMore: false,
      showAllContent: false,
      showShareMoneyTip: true, //显示分享赚钱提示
      showPlayBack: false, //显示音频后台播放按钮
      miniQr: "", //音频课程小程序码
      hasAuditionPermission: false, //试听权限
      showCourseList: false,
      showSearch: false,
      searchWord: "",
      showPoints: false,
      rewardPoints: 0,
      accessToken: '', //扫描体验二维码进来的
      showCoupon: false,
      couponList: [],
      couponIsPage: false,
      couponPage: 1,
      couponLoading: false,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      showColumnList: false,
      showSearchColumn: false,
      columnCourseList: [],
      columnCoursePage: 1,
      columnIsPage: false,
      extColumnId: 0,
      isLoading: false,
      courseCount: 0,
      hasAlltime: false,
      audioPlayTime: 0,
      isCourseChange: false,
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      cloroRGB: '',
      faStatus: 1,
      discountList: [], //被推荐人奖励优惠券
      equityList: [], //被推荐人奖励会员权益
      familyCardData: [], //被推荐人奖励亲情卡
      integral: 0, //被推荐人奖励积分
      checkText: '',
      isSelectedVoice: false, //是否从专栏点击指定课时进来的、试听
      commentStatus: 0,
      showTryEnd: false,
      commentStatus: 0,
      relatedList: [], //课程搭配学习列表（目前是社群+打卡）
      showInt: true, //是否显示领取积分按钮
      showFormText: false,
      learningPosition: null,
      firstPosition: null,
      showLearnSign: false,
      showLearnSign1: false,
      showSign: false,
      longestTime: 0, //当前课时的progressRatio时间
      showItemDetail: false,
      showCombo: false,
      belongPackageList: [],
      belongColumnList: [],
      training: [],
      belongLoading: false,
      is_page_package: false,
      is_page_column: false,
      is_page_training: false,
      pagePackage: 1,
      pageColumn: 2,
      pageTraining:2,
      showPassword: false, //显示密码输入
      noticeText: '',
      isSalesBegin: false, // 判断限时购正在进行
      showItemDetailIndex: -1,
      showSearchDirType: false,
      searchWordDirType: '',
      appAudioInfo: null, //app专用音频信息
      appNeedPlayThis: 1,//app专用自动播放标识
      showAccountQcode: false,
      officalDesc: '关注我们后才可发起砍价哦',
      mpQrcode: '', //二维码
      cfg: JSON.parse(localStorage.getItem("cfg")),
      swiperList:[],
      freeWatch: false,
      qrImg: '',
      ltAnswerStatus: 0, //答主状态 -2已删除，-1下线,1上线
      ltAnswerId: 0, // 讲师关联的答主id
      isAnswererSelf: '', //0不是答主 1自身是答主
      courseListPage: 1,
      is_courseListPage: false,
      courseListPagePrev: 1,
      is_courseListPagePrev: false,
      courseListLimit: 10,
      courseListLoading: false,
      showChoosePlayIndex: false,
      chooseToPlay: 1,
      isIosAudioApp: false,
      isAndroidAudioApp: false,
      isIosVideoApp: false,
      isAndroidVideoApp: false,
      showMarketingBuyBtn: false,
      timePercent: 0,
      playStatus: 0,
      showBottomPlayer: false,
      hasExpired: false,
      popRelateCourse: false,
      fromColumnId: -1,
      relateShowType: 0,
      bottomBuyDirection: 1,
      timingPutOn: false,
      isOffSale: false,
      showFirstScroll: false,
      moveDirection: 0,  //1点击靠右的tab；2点击靠左的tab
      isCollect: false,
      bindPhoneSetting: null,
      showGpModal: false,
      recType: 0, //推荐类型 1 访问 2 绑定 3 支付
      scrollDirection: 0,
      // 训练营参数
      ttId: '',
      tpId: '',
      tlId: '',
      popGift: false, //赠送礼包
      themeId: '', //来源圈子任务的主题id
      popRelatesDatum: false, //相关资料
      popType: 1,
      circleQuery: {}, //圈子学习计划链接附带参数
      relateCircleList: [], //关联圈子
      relateCollocation: [],
      goIndexName: '',
      learningPositionName: '',
      showStudyCard:false,
      isReceivedStudy:0,
      isReceivedBuy:0,
      nextLessons: '', // 专栏下下一个内容
      prevLessons: '', // 专栏下上一个内容
      columnCourseIndex: 0,
      columnPermission: false, // 专栏下的权限
      campButtonStatus: {}, // 当前课程是否有上下节
      styleType: JSON.parse(localStorage.getItem("cfg")).viewFormat == 2 ? 2 : 1,
      vipType: localStorage.getItem("vipType" + localStorage.getItem("userId")),
      showPackageList: false, // 展示关联售卖列表弹窗
      showLecturerModal: false,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
      chainInfo: '',
      isChainProd: false,
      optimal: null, // 最低价格返回对象
      isWeChat: utilJs.isWeiXin(),
      moreDeviceType: 1, //1: 页面中间 2：固定在底部 进入页面在页面中间，向上滚动后固定在底部
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.pathFrom = from.path;
      if (from.path == "/homePage/column/columnDetail") {
        isFromPathColumn = true;
      } else {
        isFromPathColumn = false;
      }
    });
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {
    ...mapState({
      showNavBar: (state) => state.oem_store.showNavBar,
    }),
    // 获取按钮专享价名称
    getBuyBtnTitle() {
      if (this.optimal) {
        const agentName = utilJs.getCustNameMap();
        let btnTxt = '立即购买';
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
          ? this.dataInfo.commonProdInfo.agentDiscount
          : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
            ? this.dataInfo.svipDiscount
            : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
              ? this.dataInfo.vipDiscount
              : 100
        let discountPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
        if (this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(discountPrice)) {
          let chainName = this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? '复购' : (this.chainInfo.userType == 1 ? '普通用户' : this.chainInfo.userType2Name[this.chainInfo.userType])
          btnTxt = chainPrice != this.dataInfo.price && chainName ? chainName + '专享价' : '立即购买';
        } else {
          btnTxt = discountPrice * 1 != this.dataInfo.price ? (this.vipType != 1 ? (this.vipType == 2 ? 'VIP专享价' : this.vipType == 4 ? 'SVIP专享价' : agentName[this.vipType] + '专享价') : '立即购买') : '立即购买';
        }
        if (this.dataInfo.sales && this.optimal.optimalPriceType == 101) {
          btnTxt = '立即购买';
        }
        return btnTxt
      }
      return '立即购买'
    },
    // 判断是否是推荐有礼;
    isRecommend() {
      return this.recType == 3 && this.dataInfo.recommend && this.dataInfo.recommend.isExist
    },
    // 是否展示标签价格
    isShowPriceBar() {
     return !this.isOffSale && !this.isMarketing && !this.dataInfo.hasPermission && this.dataInfo.isSaleOnly != 0 && !this.dataInfo.sales && !this.dataInfo.collage
    },
    getVipDiscountType () {
      // 由于课程获取的代理商折扣都是折扣型，不用vipDiscountType去区分，所以vipDiscountType赋值默认是1
      return (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
                      ? 1 : this.dataInfo.vipDiscountType ? this.dataInfo.vipDiscountType : 1
    },
    // 设置身份价格
    getIdPrice() {
      if (this.priceModal == 2) {
        return this.dataInfo.vipDiscountType == 2 ? (
                  (this.vipType == 4 && Number(this.dataInfo.svipDiscountPrice) < Number(this.dataInfo.price))
                    ? Number(this.dataInfo.svipDiscountPrice)
                    :
                  (this.vipType == 2 && Number(this.dataInfo.vipDiscountPrice) < Number(this.dataInfo.price))
                    ? Number(this.dataInfo.vipDiscountPrice)
                    : Number(this.dataInfo.price)
                ) : Number(this.dataInfo.price)
      } else {
        return this.dataInfo.vipDiscountType == 2 ? (
                  (this.vipType == 4 && Number(this.dataInfo.svipDiscountPrice) < Number(this.dataInfo.price))
                    ? Number(this.dataInfo.svipDiscountPrice)
                    :
                  ((this.vipType == 1 || this.vipType == 2) && Number(this.dataInfo.vipDiscountPrice) < Number(this.dataInfo.price))
                    ? Number(this.dataInfo.vipDiscountPrice)
                    : Number(this.dataInfo.price)
                ) : Number(this.dataInfo.price)
      }
    },
    // 设置身份价格折扣
    getIdDiscount() {
      if (this.priceModal == 2) {
        return (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
              ? this.dataInfo.commonProdInfo.agentDiscount
              : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
                ? this.dataInfo.svipDiscount
                : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
                  ? this.dataInfo.vipDiscount
                  : 100
      } else {
        return (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
              ? this.dataInfo.commonProdInfo.agentDiscount
              : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
                ? this.dataInfo.svipDiscount
                : ((this.vipType == 1 || this.vipType == 2) && this.dataInfo.vipDiscount < 100)
                  ? this.dataInfo.vipDiscount
                  : 100
      }
    },
    // 设置身份价格展示名称
    getIdName() {
      if (this.priceModal == 2) {
       return (this.vipType == 3 || this.vipType > 4) ? (this.dataInfo.commonProdInfo ? this.dataInfo.commonProdInfo.agentName : '') : this.vipType == 4 ? 'SVIP' : (this.vipType == 2 ? 'VIP' : '')
      } else {
       return (this.vipType == 3 || this.vipType > 4) ? (this.dataInfo.commonProdInfo ? this.dataInfo.commonProdInfo.agentName : '') : this.vipType == 4 ? 'SVIP' : (this.vipType == 1 || this.vipType == 2 ? 'VIP' : '')
      }
    },
    hasBottomBar() {
      return (this.styleType == 1 && (!this.showSearchDirType && this.dataInfo && (this.distributionId || (!this.dataInfo.hasPermission || (!this.distributionId && this.dataInfo.isInvitionCard == 1)) || (!this.isiOS && !this.distributionId && !this.dataInfo.collage && (this.dataInfo.payType == 3||this.dataInfo.payType == 2) && this.dataInfo.isSaleOnly == 1) || this.dataInfo.showPresentFriend || this.dataInfo.showMarketingCard || (this.ttId && this.campButtonStatus && this.campButtonStatus.campPermission) || (this.fromColumnId > -1 && this.columnPermission) || this.showFormText)))
        || (this.styleType == 2 && (!this.showSearchDirType && this.dataInfo && (this.distributionId || !this.dataInfo.hasPermission || this.showCommentBtnComputed || (this.ttId && this.campButtonStatus && this.campButtonStatus.campPermission) || (!this.isiOS && !this.distributionId && !this.dataInfo.collage && (this.dataInfo.payType == 3||this.dataInfo.payType == 2) && this.dataInfo.isSaleOnly == 1) || this.showFormText)))
    },
    //营销原价计算价格
    calculationPrice() {
      let idDiscount = (this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount < 100
        ? this.dataInfo.commonProdInfo.agentDiscount
        : (this.vipType == 4 && this.dataInfo.svipDiscount < 100)
          ? this.dataInfo.svipDiscount
          : (this.vipType == 2 && this.dataInfo.vipDiscount < 100)
            ? this.dataInfo.vipDiscount
            : 100;
      let calculationPrice = Number(this.dataInfo.price * idDiscount / 100).toFixed(2);
      if (this.optimal) {
        // 链动价格
        let chainPrice = this.chainInfo && this.chainInfo.isChainProd ? (this.chainInfo.enableReorderDiscount == 1 && this.chainInfo.isReorder ? this.chainInfo.reorderBonus : this.chainInfo.enableOrderDiscount == 1 ? this.chainInfo.orderBonus : this.dataInfo.price) : this.dataInfo.price;
        // 当链动价格存在且链动价格跟常规身份价格对比时，如果链动小于或者等于身份价格取链动价格
        calculationPrice = this.chainInfo && this.chainInfo.isChainProd && Number(chainPrice) <= Number(calculationPrice) ? chainPrice : calculationPrice;
        if (this.dataInfo.isFriendHelper) {
          calculationPrice = Number(this.optimal.optimalPrice).toFixed(2);
        }
      }
      return calculationPrice;
    },
    //单卖&&没有权限&&价格大于0&&（加入形式&&不是好友助力）&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.dataInfo.isSaleOnly != 0 && this.dataInfo.hasPermission == false && this.dataInfo.payType == 2
      return showdiscount
    },
    //是否是营销活动
    isMarketing() {
      let isMarketing = this.dataInfo &&
        (this.dataInfo.sales || (this.dataInfo.bargain
          && ((this.dataInfo.bargain.status == 1 &&
            this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) &&
            this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || this.dataInfo.isFriendHelper)
      return isMarketing
    },
    //不显示优惠券
    isFavourable() {
      let isFavourable = this.dataInfo &&
        ((this.dataInfo.bargain
          && ((this.dataInfo.bargain.status == 1 &&
            this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || this.dataInfo.isFriendHelper)
      return isFavourable
    },
    //大转盘是否显示
    showTurn() {
      let showturn = this.dataInfo.joinActivityInfo
      && this.dataInfo.joinActivityInfo.isJoinActivity == 1
      && !(
        ((this.vipType == 3 || this.vipType > 4) && this.dataInfo.commonProdInfo && this.dataInfo.commonProdInfo.agentDiscount == 0) ||
        (this.vipType == 2 && this.dataInfo.vipDiscount == 0) ||
        ((this.vipType == 2 || this.vipType == 4) && this.dataInfo.svipDiscount == 0)
      )
      return showturn;
    },
    showGetIntegrate() {
      let showIntegrateTmp = !this.$isStore() && this.dataInfo.hasPermission && !this.distributionId && this.companyAuth.pointModel == 1 && this.showInt && this.companyAuth.enablePoints == 1 && this.companyAuth.enableListenAudioPoint == 1 && this.pointsOnBuyingAudio * 1 > 0;
      return showIntegrateTmp;
    },
    hasGiftRelates() {
      let hasGiftRelatesTmp = this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0;
      return hasGiftRelatesTmp;
    },
    formflag(){
      let formflag=(this.dataInfo.payType==1||(this.dataInfo.payType==2))&&this.dataInfo.collectPage != 3 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && this.dataInfo.permissionType != 42 && localStorage.getItem("showForm") == 1
      return formflag
    },
    showMarketingBar() {
      let showmarketingbar = !this.$isWxAppIos() && this.dataInfo && this.dataInfo.payType != 1 && (this.dataInfo.sales || (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) || ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) || this.dataInfo.isFriendHelper);
      return showmarketingbar;
    },
    showMarketingTime() {
      return this.dataInfo && !this.dataInfo.hasPermission && this.dataInfo.payType != 1 &&
        (
          this.dataInfo.sales ||
          (this.dataInfo.bargain && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) ||
          ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) ||
          this.dataInfo.isFriendHelper
        )
    },
    // 是否显示评论
    showCommentBtnComputed() {
      // enableComment 1: 详情开启评论，0：隐藏评论，2：使用全局设置判断是否开启评论
      let isShowComment = false;
      if (this.dataInfo.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
        isShowComment = true;
      } else if (this.dataInfo.enableComment == 0) {
        isShowComment = false;
      } else if (this.dataInfo.enableComment == 2) {
        // dataInfo.hasPermission && cfg && cfg.enableComment == 1 && !distributionId
        if (this.cfg && this.cfg.enableComment == 1 && this.dataInfo.hasPermission && !this.distributionId) {
          if (this.cfg && this.cfg.enableAudioComment == 1) {
            isShowComment = true;
          } else {
            isShowComment = false;
          }
        } else {
          isShowComment = false;
        }
      }
      return isShowComment;
    },
    isUserGroup() { // true: 指定用户购买或者观看，但是该用户不属于指定用户  false：非指定用户购买或者观看，或者该用户属于指定用户
      let isUserGroup = ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isUserGroup == 1 && this.dataInfo.isInUserGroup != 1);
      return isUserGroup;
    },
    // isDepartments： 是否开启指定组织，1是0否   isUserInDepartment：当前用户是否在指定组织中，1是0否
    isStoreUserGroup(){ // true: 门店指定组织购买或者观看，但是该用户不在指定组织   false: 没有开启指定组织 或者该用户属于指定组织
      let flag = this.$isStore() && ((!this.dataInfo.hasPermission) || (this.dataInfo.hasPermission && (this.dataInfo.permissionType == 1 || this.dataInfo.permissionType == 2 || this.dataInfo.permissionType == 3 || this.dataInfo.permissionType == 18 || this.dataInfo.permissionType == 19))) && (this.dataInfo.isDepartments == 1 && this.dataInfo.isUserInDepartment != 1);
      return flag;
    },
    showInviteGroup() { //是否展示引导入群入口 dataInfo.guideData.showPosition 1:获得权限前展示 2:获得权限后展示 3:始终展示
      let showPosition = this.dataInfo && this.dataInfo.guideData && (this.dataInfo.guideData.showPosition == 3 || (this.dataInfo.guideData.showPosition == 1 && (!this.dataInfo.hasPermission || (this.dataInfo.payType == 1 && this.dataInfo.isSaleOnly != 0))) || (this.dataInfo.guideData.showPosition == 2 && this.dataInfo.hasPermission))
      let inviteGroup = this.dataInfo && this.dataInfo.guideData && showPosition && this.dataInfo.guideData.isOpenGuide == 1 && this.dataInfo.guideData.guideType.includes(1);
      return inviteGroup
    }
  },
  watch: {
    $route(to, from) {
      // 新增课程可以关联课程后，可能会从出现从音频详情页跳入音频详情页的情况，无法进入activate
      if (
        to.path == "/homePage/course/voice" &&
        from.path == "/homePage/course/voice"
      ) {
        clearTimeout(previewTimmer);
        if (this.dataInfo.hasPermission == true && curPlayTime != 0 && startSt != 0) { //关联专栏上一节下一节跳转时也需要记录播放进度
          if (curPlayTime > 2 && totalTime != 0) {
            let progress = Number(curPlayTime / totalTime).toFixed(2);
            endSt = new Date().getTime();
            playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
            this.setProgress(this.dataInfo.items[this.currentIndex].detailId, progress, playedDuration);
            this.isShareInt(playedDuration);
            startSt = 0;
            endSt = 0;
            playedDuration = 0;
          }
        }
        this.initData();
      }
    },
    showHideOnBlur() { //展示全部拼团的时候禁止页面滚动
      if (this.showHideOnBlur) {
        // document.documentElement.style.overflowY = 'hidden'
        document.body.style.position = 'fixed';
      } else {
        // document.documentElement.style.overflowY = 'auto'
        document.body.style.position = 'static';
      }
    },
    currentIndex() {
      this.getDetailHtml(this.currentIndex);
      this.wechatShare();
    },
    showItemDetailIndex() { //取单节详情的内容
      this.getDetailHtml(this.showItemDetailIndex);
    }
  },
  methods: {
    showHorizontalGap(lessonList, index) {
      if (lessonList[index].chapterId && lessonList[index].chapterSort == lessonList[index].cnt) {
        return true;
      } else if (lessonList[index + 1] && lessonList[index + 1].chapterId && lessonList[index + 1].chapterSort == 1){
        return true;
      } else {
        return false;
      }
    },
    hideChaptList(item, index) {
      if (item.showStatus != 'hide') {
        for (let i = 0; i < item.cnt; i++) {
          if (this.dataInfo.items[index + i] && this.dataInfo.items[index + i].chapterId == item.chapterId) {
            this.$set(this.dataInfo.items[index + i], "showStatus", 'hide');
          }
        }
      } else {
        for (let i = 0; i < item.cnt; i++) {
          if (this.dataInfo.items[index + i] && this.dataInfo.items[index + i].chapterId == item.chapterId) {
            this.$set(this.dataInfo.items[index + i], "showStatus", 'show');
          }
        }
      }
    },
    getCommentCount(count = 0) {
      if (count && count > 0) {
        const index = this.tabList.findIndex(i => i.title == '评论')
        index > -1 && this.$set(this.tabList[index], "smallNum", count);
      }
    },
    addComment() {
      this.typeBar = 2
      this.$nextTick(() => {
        if (this.$refs.commentCom) {
          this.$refs.commentCom.public_addComment()
        }
      })
    },
    clickLecturer() {
      this.showLecturerModal = true;
    },
    popPresentCourse() {
      if (this.$refs.bottomBuy) {
        this.$refs.bottomBuy.isShowPresent = true;
      }
    },
    clickGoAllPackage(data) {
      this.showPackageList = true;
      this.$refs.packageList.initModalData(data);
    },
    // 初始化训练营底部目录栏数据
    campDirectoryInitData(type = 1, isGoNext = 0) { // isGoNext是否需要自动跳转下一个  type 1初始化数据  2闯关模式和定期考试 以及 （日期模式+自定义时间）需要逐个解锁，所以播放结束后需要先重新获取状态, 
      this.$nextTick(() => {
        if (!!this.ttId && this.$refs.campDirectory) {
          this.$refs.campDirectory.initData({
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId
          }).then((data) => {
            this.campButtonStatus = data
            const { modeType, dateLockType }= this.campButtonStatus
            // 闯关模式和定期考试更新完状态后直接跳转到下一节
            if (isGoNext && this.playType == 1 && type == 2 && (modeType == 3 || modeType == 4 || (modeType == 1 && dateLockType == 2)) && this.campButtonStatus.isNextUnlock) {
              this.handleCampDirectory(1)
            } else if (this.playType == 1 && type == 2 && !this.campButtonStatus.isNextUnlock) { // 如果播放到最后一节，还是没权限自动跳转，就播放第一节
              this.seeVoice(0, 0, 1);
            }
          })
        }
      })
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      if (this.$refs.campDirectory) {
        this.$refs.campDirectory.handleCampDirectory(type)
      }
    },
    goNextCampLesson(currentIndex, isGoNext = 0) { // isGoNext是否需要自动跳转下一个
      // 下一节锁住时，单节播放、单节循环、顺序播放都需要重新获取新的状态，只是单节播放、单节循环不自动跳转
      if (this.campButtonStatus && this.campButtonStatus.campPermission && (currentIndex == (this.dataInfo.dirCount - 1))) {
        const { modeType,dateLockType }= this.campButtonStatus
        // 闯关模式和定期考试需要逐个解锁，所以播放结束后需要先重新获取状态
        if ((modeType == 3 || modeType == 4 || (modeType == 1 && dateLockType == 2)) && !this.campButtonStatus.isNextUnlock) {
          let timer = null
          timer = setTimeout(() => { // 需要延迟一会儿，进度没有同步那么快
            this.campDirectoryInitData(2, isGoNext)
            clearTimeout(timer);
          }, 1000);
        } else if (isGoNext && this.playType == 1 && this.campButtonStatus.isNextUnlock) {
          this.handleCampDirectory(1)
        }
      }
    },
    toTryStudy() {
      if (this.currentIndex == 0) {
        this.$refs.audioCom.checkSubscribeBeforePlay();
      } else {
        this.seeVoice(0);
      }
    },
    getSingleCourse(cIndex) {
      return new Promise((resolve, reject) => {
        let postUrl = `${global.apiurl}courses/${this.courseId}/dirs?page=${cIndex}&limit=1&courseType=1&hasPermission=${this.dataInfo.hasPermission}`;
        if (this.accessToken) {
          postUrl = postUrl + '&accessToken=' + this.accessToken;
        }
        utilJs.getMethod(postUrl,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    getProdRelateCollocation() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdRelateCollocation?prodType=5&prodId=${this.courseId}`,
        res => {
          this.relateCollocation = res.data ? res.data.slice(0,3) : [];
        }
      );
    },
    joinCircle() {
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circleFeed",
        query: {id: this.dataInfo.circleList[0].circleId}
      });
    },
    cancleCollectPop() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.course,
        prodId: this.courseId,
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/cancelCollect`, postData, (res) => {
        this.$showCjToast({
          text: "收藏已取消",
          type: 'text',
        });
        this.cancelCollect();
      });
    },
    doCollectPop() {
      if ((this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) || (this.bindPhoneSetting && this.bindPhoneSetting.collectBind)) {
        if (utilJs.goBindMobile()) return;
      }
      let postData = {
        prodType: this.cfrom.course,
        prodId: this.courseId,
        subProdType: 1
      }
      utilJs.postMethod(`${global.apiurl}prodCollect/addToCollect`, postData, (res) => {
        this.$showCjToast({
          text: "课程已收藏",
          type: 'text',
        });
        this.doCollect();
      });
    },
    doCollect() {
      this.isCollect = true;
    },
    cancelCollect() {
      this.isCollect = false;
    },
    handleClickPlaint() {
      this.$store.commit('updateShowComplaint', true);
    },
    putOn() {
      this.dataInfo.status = 1;
      this.timingPutOn = false;
    },
    closeFirstScroll() {
      this.showFirstScroll = false;
    },
    otherClick() {
      this.showMarketingBuyBtn=false;
      this.showSearchDirType=false;
      if (this.searchWordDirType) {
        if (this.typeBar == 1 && document.getElementById('scrollCourse')) { //课程目录滚动到当前播放的音频
          this.$nextTick(() => {
            document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[this.currentIndex] && (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) > 0 ? (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) : 5;
          });
        }
        if (this.typeBar == 1 && document.getElementById('scrollCourseVtr') && document.getElementById('scrollCourseVtr').childNodes[this.currentIndex] && this.styleType == 1) {
          this.$nextTick(() => {
            document.documentElement.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
            document.body.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
          });
        }
      }
      this.searchWordDirType="";
    },
    popRelate() {
      this.popRelateCourse = true;
      if (document.getElementById('relatedScroll')) {
        document.getElementById('relatedScroll').scrollLeft = 0;
      }
    },
    popGiftModal() {
      this.popType = 1;
      this.popGift = true;
    },
    popRelatesDatumModal() {
      this.popType = 2;
      this.popRelatesDatum = true;
    },
    closeGiftModal() {
      if (this.popGift) {
        this.popGift = false;
      } else if (this.popRelatesDatum) {
        this.popRelatesDatum = false;
      }
    },
    clickBottomPlayer() {
      this.$refs.audioCom.clickPlay();
    },
    popMarketingBuy() {
      this.showMarketingBuyBtn = true;
    },
    goToTop() {
      window.scrollTo(0, 0);
    },
    closeTryEnd() {
      this.showTryEnd = false;
      // utilJs.sendDataToApp('appAudioDestroy');
    },
    getDetailHtml(index) {
      if (index < 0) {
        return;
      }
      let detailInfo = this.dataInfo && this.dataInfo.items && this.dataInfo.items[index] ? this.dataInfo.items[index].detail : '';
      if (detailInfo && detailInfo.substring(0, 4) == 'http' && detailInfo.length > 5) {
        this.$set(this.dataInfo.items[index], "detail", "");
        utilJs.getPageHtml(detailInfo, (sres) => {
          this.$set(this.dataInfo.items[index], "detail", sres);
        }, () => {
          this.$set(this.dataInfo.items[index], "detail", "");
        });
      }
    },
    confirmChooseToPlay() {
      if (this.chooseToPlay == 1) {
        this.learningPositionTmp = Number(this.$route.query.goIndex);
        this.currentIndex = Number(this.$route.query.goIndex) % 10;
        this.learningPosition = Number(this.$route.query.goIndex) % 10;
        this.courseListPage = (Math.floor(this.learningPositionTmp / 10) + 1);
        this.courseListPagePrev = (Math.floor(this.learningPositionTmp / 10) + 1);
        this.firstPosition = false;
        // this.currentIndex = Number(this.$route.query.goIndex)
        // this.learningPosition = this.currentIndex;
        // this.firstPosition = false;
        this.seeVoice(this.currentIndex, 1);
        // try {
        //   document.addEventListener(
        //     "WeixinJSBridgeReady",
        //     function () {
        //       this.seeVoice(this.currentIndex, 1);
        //     },
        //     false
        //   );
        //   WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
        //     // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
        //     this.seeVoice(this.currentIndex, 1);
        //     console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
        //   });
        // } catch (error) { }
      } else {
        this.learningPositionTmp = this.learningPosition;
        this.currentIndex = this.learningPosition % 10;
        this.learningPosition = this.learningPosition % 10;
        this.courseListPage = (Math.floor(this.learningPositionTmp / 10) + 1);
        this.courseListPagePrev = (Math.floor(this.learningPositionTmp / 10) + 1);
        // this.currentIndex = this.learningPosition;
        this.seeVoice(this.learningPosition, 1);
      }
      this.getCourseList();
      this.$nextTick(() => {
        this.showChoosePlayIndex = false;
      })
    },
    chooseIndex(type) {
      this.chooseToPlay = type;
    },
    getCourseList(isPrev = 0) {
      if (this.courseListLoading) {
        return;
      }
      this.courseListLoading = true;
      // let maxNum = Math.max(this.currentIndex, (this.$route.query.goIndex || Number(this.$route.query.goIndex) == 0) && Number(this.$route.query.goIndex) < 50 ? Number(this.$route.query.goIndex) : 0)
      // if (maxNum > 9 && this.courseListPage == 1) {
      //   this.courseListLimit = (Math.floor(maxNum / 10) + 1) * 10;
      // } else {
      //   this.courseListLimit = 10;
      // }
      let pageTmp = isPrev == 1 ? this.courseListPagePrev : this.courseListPage;
      this.courseListLimit = 10;
      let postUrl = `${global.apiurl}courses/${this.courseId}/dirs?page=${pageTmp}&limit=${this.courseListLimit}&courseType=1&hasPermission=${this.dataInfo.hasPermission}`;
      if (this.accessToken) {
        postUrl = postUrl + '&accessToken=' + this.accessToken;
      }
      utilJs.getMethod(postUrl, res => {
        if (this.dataInfo.payType == 3 && res && res.length > 0) {
          res.forEach(item => {
            item.allowWholeWatch = 0;
            item.watchPermission = 0;
            item.watchTime = 0;
            item.watchTimeSeconds = 0;
          });
        }
        if (isFirstRequistList) {
          let giftPops = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
          if (this.dataInfo.hasPermission && this.dataInfo.giftRelates && this.dataInfo.giftRelates.length > 0 && !giftPops.includes(this.courseId)) {
            this.dataInfo.giftRelates.forEach((item) => {
              if (item.prodType == global.ckFrom.shopping && item.status != 1) {
                // this.goodsToGet = true;
                let $this = this;
                this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '赠品礼包中包含商城商品，是否前往兑换',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '取消', //取消按钮文本
                confirmButtonText: '去兑换', //确认按钮文本
                onConfirm() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.courseId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                  $this.popGiftModal();
                },
                onCancel() {
                  let giftPopArrTmp = localStorage.getItem('giftPopArr') ? JSON.parse(localStorage.getItem('giftPopArr')) : [];
                  giftPopArrTmp.push($this.courseId)
                  localStorage.setItem('giftPopArr', JSON.stringify(giftPopArrTmp));
                }
              })
              }
            })
          }
          this.dataInfo.items = res;
          this.setAppAudioInfo();
          this.seeVoice(this.currentIndex, 1);
          // if ((this.$route.query.goIndex || Number(this.$route.query.goIndex) == 0) && Number(this.$route.query.goIndex) < 50 && Number(this.$route.query.goIndex) < this.dataInfo.dirCount && this.dataInfo.hasPermission && (this.learningPosition || this.learningPosition == 0) && this.firstPosition && (Number(this.$route.query.goIndex) != this.learningPosition) && !isFromPathColumn && Number(this.fromColumnId) == -1) {
          //   this.showChoosePlayIndex = true;
          // } else {
          //   if ((this.$route.query.goIndex || Number(this.$route.query.goIndex) == 0) && Number(this.$route.query.goIndex) < 50 && Number(this.$route.query.goIndex) < this.dataInfo.dirCount && (this.dataInfo.hasPermission || !this.learningPosition)) {
          //     this.currentIndex = Number(this.$route.query.goIndex);
          //     this.learningPosition = Number(this.$route.query.goIndex);
          //     this.seeVoice(this.currentIndex, 1);
          //     // try {
          //     //   document.addEventListener(
          //     //     "WeixinJSBridgeReady",
          //     //     function () {
          //     //       this.seeVoice(this.currentIndex, 1);
          //     //     },
          //     //     false
          //     //   );
          //     //   WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
          //     //     // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
          //     //     this.seeVoice(this.currentIndex, 1);
          //     //     console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
          //     //   });
          //     // } catch (error) { }
          //   } else if (this.learningPosition != null && this.firstPosition == true && this.learningPosition < this.dataInfo.dirCount) {
          //     this.seeVoice(this.learningPosition, 1);
          //   } else {
          //     this.seeVoice(0, 1);
          //   }
          // }
          this.checkWholePlayPermission();
          this.checkAuditionPermission();
          this.getDetailHtml(this.currentIndex); //获取第一节单节详情
          // if ((this.$route.query.goIndex || this.$route.query.goIndex == 0) && this.dataInfo.hasPermission) {
          //   let goIndex = this.dataInfo.hasPermission ? (this.$route.query.goIndex || 0) : 0;
          //   this.currentIndex = Number(goIndex);
          //   this.learningPosition = Number(goIndex);
          //   try {
          //     document.addEventListener(
          //       "WeixinJSBridgeReady",
          //       function () {
          //         this.seeVoice(this.currentIndex, 1);
          //       },
          //       false
          //     );
          //     WeixinJSBridge.invoke("getNetworkType", {}, function (e) {// eslint-disable-line
          //       // 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
          //       this.seeVoice(this.currentIndex, 1);
          //       console.log("WeixinJSBridgeWeixinJSBridgeWeixinJSBridgeWeixinJSBridge");
          //     });
          //   } catch (error) { }
          //   // $this.seeVoice($this.currentIndex, 1);
          // } else {
          //   if (this.learningPosition != null && this.firstPosition == true) {
          //     this.seeVoice(this.learningPosition, 1);
          //   } else {
          //     this.seeVoice(0, 1);
          //   }
          // }
          if (document.getElementById('scrollCourse')) {
            this.$nextTick(() => {
              document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[this.currentIndex] && (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) > 0 ? (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) : 5;
            });
          }
          if (document.getElementById('scrollCourseVtr') && document.getElementById('scrollCourseVtr').childNodes[this.currentIndex] && this.typeBar == 1 && this.styleType == 1) {
            this.$nextTick(() => {
              document.documentElement.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
              document.body.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
            });
          }
          // setTimeout(() => {
          //   let fromColumnCourseId = sessionStorage.getItem('fromColumnCourse') || 0;
          //   if (this.dataInfo.hasPermission && fromColumnCourseId && Number(this.fromColumnId) != -1 && Number(fromColumnCourseId) == Number(this.fromColumnId)) {
          //     sessionStorage.removeItem('fromColumnCourse');
          //     // this.$refs.audioCom.audioPlay();
          //     this.seeVoice(2)
          //     this.goToTop();
          //     console.log('autoplayplayplay', this.$refs.audioCom)
          //   }
          // }, 800)
        } else {
          if (isPrev == 1) {
            this.dataInfo.items = [...res, ...this.dataInfo.items];
            this.currentIndex = this.currentIndex + 10;
            if (this.learningPosition != null)
              this.learningPosition = this.learningPosition + 10;
            this.$nextTick(() => {
              if (this.typeBar == 1 && document.getElementById('scrollCourse') && this.cfg && this.cfg.dirType == 1) {
                let bWidth = document.getElementById('app').clientWidth;
                let gapWidth = (bWidth / 16) * 0.5;
                document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').scrollLeft + (document.getElementById('scrollCourse').childNodes[0].offsetWidth * 10 + gapWidth * 10) - 40;
              } else if (this.typeBar == 1 && this.cfg && this.cfg.dirType == 2 && this.cfg && this.cfg.enableVideoTop == 1) {
                let totalHeight = 0;
                for (let i = 0; i < 10; i++) {
                  totalHeight = totalHeight + document.getElementById('scrollCourseVtr').childNodes[i].offsetHeight
                }
                document.documentElement.scrollTop = document.documentElement.scrollTop + totalHeight;
                document.body.scrollTop = document.body.scrollTop + totalHeight;
              } else if (this.typeBar == 1 && this.cfg && this.cfg.dirType == 2) {
                document.documentElement.scrollTop = 2;
                document.body.scrollTop = 2;
              }
              // if (this.showCourseList && document.getElementById('scrollCourse1')) {
              //   let totalHeight = 0;
              //   for (let i = 0; i < 10; i++) {
              //     totalHeight = totalHeight + document.getElementById('scrollCourse1Wrap').childNodes[i].clientHeight
              //   }
              //   document.getElementById('scrollCourse1').scrollTop = document.getElementById('scrollCourse1').scrollTop + totalHeight - 40;
              // }
            })
          } else {
            //返回该页的第一个视频属于上一页的某个章节，则上一页的那个章节需要展开
            if (res[0].chapterId && res[0].chapterSort != 1) {
              for (let i = 1; i < res[0].chapterSort; i++) {
                if (this.dataInfo.items[this.dataInfo.items.length - i] && this.dataInfo.items[this.dataInfo.items.length - i].chapterId == res[0].chapterId) {
                  this.$set(this.dataInfo.items[this.dataInfo.items.length - i], "showStatus", 'show');
                }
              }
            }
            this.dataInfo.items = [...this.dataInfo.items, ...res];
          }
          if (this.isIosVideoApp || this.isAndroidVideoApp) { 
            this.addMoreCourse(res);
          }
        }
        // if (this.dataInfo.items.length < this.dataInfo.dirCount) {
        //   if (this.courseListLimit > 10) {
        //     this.courseListPage = Math.floor(this.courseListLimit / 10) + 1;
        //   } else {
        //     this.courseListPage = this.courseListPage + 1;
        //   }
        // } else {
        //   this.courseListPage = this.courseListPage;
        // }
        // this.is_courseListPage = this.dataInfo.items.length < this.dataInfo.dirCount ? true : false;
        if (isPrev == 1 || isFirstRequistList) {
          if (this.courseListPagePrev > 1) {
            this.courseListPagePrev --;
            this.is_courseListPagePrev = true;
          } else {
            this.is_courseListPagePrev = false;
          }							
        }
        if (isPrev == 0 || isFirstRequistList) {
          if (this.courseListPage < Math.ceil(this.dataInfo.dirCount / 10)) {
            this.courseListPage ++;
            this.is_courseListPage = true;
          } else {
            this.is_courseListPage = false;
          }
        }
        this.courseListLoading = false;
        if (isFirstRequistList) {
          if (this.is_courseListPagePrev && this.dataInfo.items.length < 10) {
            this.getCourseList(1);
          }
          this.wechatShare();
        }
        isFirstRequistList = false;
      });
    },
    changePsw() {
      this.noticeText = "";
    },
    //提交密码
    submitPassword(inputPwd) {
      if (!inputPwd.trim()) {
        this.noticeText = "*密码错误";
        return;
      }
      if (isClick) {
        return;
      }
      isClick = true;
      utilJs.postMethod(global.apiurl + "common/verifyEncrypt", {
        encrypt: inputPwd,
        prodType: global.ckFrom.course,
        id: this.courseId
      }, res => {
        isClick = false;
        if (res.code == 500) {
          this.noticeText = "*密码错误";
        } else if (res.code == 200) {
          this.showPassword = false;
          // 专栏课程输入密码后刷新页面数据
          if (Number(this.fromColumnId) != -1) {
            let newUrl = `/homePage/course/voice?courseId=${this.courseId}&ckFrom=${this.ckFrom}`;
            this.$routerGo(this, "replace", {path: newUrl});
            return
          }
          this.initData()
        }
      },
        failRes => {
          isClick = false;
        }
      );
    },
    inputPsw() {
      let ckFrom = this.ckFrom == this.cfrom.collageCourse ? this.cfrom.course : (this.ckFrom == this.cfrom.collageColumn ? this.cfrom.column : this.ckFrom);
      let extId = this.ckFrom == this.cfrom.collageCourse ? -1 :this.extId;
      if (this.bindPhoneSetting && this.bindPhoneSetting.passwordBind && utilJs.goBindMobile()) {
        return;
      }
      ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? this.cfrom.course : ckFrom);
      extId = this.isShowPresent == true ? -1 : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? -1 : extId);
      // 有关联表单，则跳到报名表单处
      if (this.dataInfo.collectPage != 3 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
        this.goForm(this.isShowPresent, '');//type 1表示关联产品
      } else {
        this.showTryEnd = false
        this.noticeText = "";
        this.showPassword = true;
      }
    },
    getQrImg() {
      let getUrl = `${global.apiurl}courses/getCourseQrcode/${this.courseId}`;
      utilJs.getMethod(getUrl, res => {
        this.qrImg = res;
        this.freeWatch = true;
      })
    },
    showFollowQr() {
      if (!this.qrImg) {
        this.getQrImg();
      } else {
        this.freeWatch = true;
      }
    },
    checkIsSubscribe(isSubscribe) {
      this.dataInfo.isSubscribe = isSubscribe;
    },
    clickPlayBtn() {
      if (((this.currentIndex == this.dataInfo.items.length - 1) || (this.currentIndex == this.dataInfo.items.length - 2)) && this.is_courseListPage && !this.courseListLoading && !this.distributionId && !((this.isAndroidAudioApp || this.isIosAudioApp) && !(this.isAndroidVideoApp || this.isIosVideoApp))) {
        this.getCourseList();
      }
    },
    //购买信息
    buyedInfoSwiper() {
      let that = this
      utilJs.getMethod(`${global.apiurl}common/buyedInfoSwiper?prodId=${that.courseId}&prodType=${global.ckFrom.course}`, function (res) {
        that.swiperList = res
      }, failRes => {
      });
    },
    hideDialog() {
      this.showAccountQcode = false;
    },
    // 判断是否关注公众号
    checkUserIsFollowedMp() {
      let _this = this;
      return new Promise(function (resolve, reject) {
        utilJs.getMethod(`${global.apiurl}bargains/getMpData?bargainId=${_this.dataInfo.bargain.bargainId}`,
          res => {
            resolve(res);
          },
          failRes => {
            reject(failRes)
          }
        )
      })
    },
    // 砍价跳转
    handleClickBargainDetail(bargainId) {
      if (this.dataInfo.bargain.status == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能砍价！',
          type: 'text'
        });
        return;
      }
      this.checkUserIsFollowedMp().then(res => {
        if (res.threshold == 2 && res.isFollowedMp == 0) {
          this.mpQrcode = res.mpQrcode;
          this.showAccountQcode = true;
          return;
        }
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          return;
        }
        // 有关联表单，则跳到报名表单处
        if (this.dataInfo.collectPage == 1 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1) {
          this.goForm(this.isShowPresent, bargainId);
        } else {
          if (this.dataInfo.bargain.status == 2) {
            this.$routerGo(this, "push", {
              path: "/homePage/bargain/bargainDetail",
              query: {
                bargainId: bargainId
              }
            });
          }
        }
      })
    },
    getBelong(tabType) {
      if (!this.belongLoading) {
        this.belongLoading = true;
        let $this = this;
        if (tabType == 1) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pagePackage + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongPackageList = res.list.combos.data ? $this.belongPackageList.concat(res.list.combos.data) : [];
            if ($this.pagePackage == 1) { //从课程刚进来页面的时候需要获取专栏列表，第二页开始不需要了
              $this.belongColumnList = res.list.columns.data;
              $this.training = res.list.training.data ? res.list.training.data : [];
              $this.relateCircleList= res.list.circles;
               // $this.pageColumn = res.list.columns.data && res.list.columns.data.length >= 10 ? ($this.pageColumn + 1) : $this.pageColumn;
              $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
              $this.is_page_training = res.list.training.data && res.list.training.data.length >= 10 ? true : false;
            }
            $this.pagePackage = res.list.combos.data && res.list.combos.data.length >= 10 ? ($this.pagePackage + 1) : $this.pagePackage;
            $this.is_page_package = res.list.combos.data && res.list.combos.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 2) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pageColumn + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.belongColumnList = $this.belongColumnList.concat(res.list.columns.data);
            $this.relateCircleList= res.list.circles;
            $this.pageColumn = res.list.columns.data && res.list.columns.data.length >= 10 ? ($this.pageColumn + 1) : $this.pageColumn;
            $this.is_page_column = res.list.columns.data && res.list.columns.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        } else if (tabType == 3) {
          let getUrl = `${global.apiurl}combos/showAll?`;
          if (this.distributionId) {
            getUrl = `${global.apiurl}distributionMarkets/showAll?`;
          }
          utilJs.getMethod(getUrl + 'proType=1&proId=' + this.courseId + '&page=' + this.pageTraining + '&limit=10' + '&tabType=' + tabType, function (res) {
            $this.belongLoading = false;
            $this.training = res.list.training.data ? $this.training.concat(res.list.training.data) : [];
            $this.relateCircleList= res.list.circles;
            $this.pageTraining = res.list.training.data && res.list.training.data.length >= 10 ? ($this.pageTraining + 1) : $this.pageTraining;
            $this.is_page_training = res.list.training.data && res.list.training.data.length >= 10 ? true : false;
          }, failRes => {
            $this.belongLoading = false;
          });
        }
      }
    },
    getMore(tType) {
      this.getBelong(tType)
    },
    handleShowGuidePop() {
      // 显示入群引导
      this.$refs.guidance.isShowPop();
    },
    scrollPosition(type) {
      let $this = this
      this.$nextTick(function () {
        setTimeout(() => {
          if (type == 1 && document.getElementById('scrollCourse')) {
            document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[$this.learningPosition] ? document.getElementById('scrollCourse').childNodes[$this.learningPosition].offsetLeft - 10 : 0;
          } else if (type == 2 && document.getElementById('scrollCourse1')) {
            document.getElementById('scrollCourse1').scrollTop = document.querySelectorAll(".chapt-item") && document.querySelectorAll(".chapt-item")[$this.learningPosition] ? document.querySelectorAll(".chapt-item")[$this.learningPosition].offsetTop - 10 : 0;
          }
        }, 200)
      })
      setTimeout(() => {
        $this.showLearnSign = false;
        $this.showLearnSign1 = false;
      }, 250);
    },
    // 判断是否按次数/观看分钟数获取积分
    isShareInt(playedDuration) {
      if (this.companyAuth.pointModel == 2) {
        if (this.companyAuth.enableWatchListen == 1 && playedDuration > 5) {
          this.shareGetIntegration(this.courseId, this.dataInfo.items[this.currentIndex].detailId, 60, -1);
        }
        if (this.companyAuth.enableTotalWatchCourse == 1) {
          this.shareGetIntegration(this.courseId, this.dataInfo.items[this.currentIndex].detailId, 63, Number(playedDuration));
        }
      }
    },
    // 获取搭配学习列表
    getRelatedList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getMainList?prodType=111&prodId=${this.courseId}`, (res) => {
        this.relatedList = [...this.relatedList, ...res.matchList];
        this.$nextTick(() => {
          if (document.getElementById('relatedScroll') && this.relatedList.length > 5) {
            document.getElementById('relatedScroll').addEventListener("scroll", this.handleRelatedScroll);
          }
        })
        if (!this.$isStore() && this.styleType == 2 && ((this.relatedList && this.relatedList.length > 0) || (this.dataInfo && this.dataInfo.circleList && this.dataInfo.circleList.length > 0)) && this.dataInfo.hasPermission) {
          this.tabList.splice(2, 0, {
            title: '互动',
            index: 3,
          })
        }
      });
    },
    //点击搭配学习
    goRevlantDetail(type, id,item) {
      let toPath = '';
      // 10社群 41打卡
      if (type == 10) {
        toPath = `/homePage/socialGroup/socialGroupInfo?SocialRoomId=${id}`;
      } else if (type == 111) {
        if(item.hasPermission){
          switch (item.type) {
            case 1:
              //日历打卡,若当前日期不在开始日期和结束日期之间，则从开始日期进入，否则从当前日期进入
              let startTimeTamp = new Date(`${item.startTime} ${item.startHour}`.replace(/-/g, "/")).getTime();
              let endTimeTamp = new Date(`${item.endTime} ${item.endHour}`.replace(/-/g, "/")).getTime();
              let nowTimeTamp = new Date().getTime();
              let curTime = utilJs.dateFormat(nowTimeTamp);
              if (nowTimeTamp < startTimeTamp || nowTimeTamp > endTimeTamp) {
                curTime = item.startTime;
              }
              toPath=`/homePage/clockIn/stuHomeWork?workType=1&clockInId=${id}&curDate=${curTime}`
              break;
            case 2:
              //作业打卡，如果超过一个作业，则进入作业列表，否则进入作业详情
              toPath= `/homePage/clockIn/stuHomeWork?workType=2&clockInId=${id}&curId=${item.hwId}`;
              break;
            case 3:
              //闯关打卡
                toPath= `/homePage/clockIn/stuHomeWork?workType=3&clockInId=${id}&curId=${item.hwId}&isFirstJoin=${item.isFirstJoin}`
                break;
          }
        }else{
          toPath = `/homePage/clockIn/clockInDetail?clockInId=${id}`;
        }
      } else if (type == 125) {
        toPath= `/homePage/testPaper/testDetail?testId=${id}&origin=${global.ckFrom.course}&prodId=${this.courseId}`
      }
      this.$routerGo(this, "push", { path: toPath });
    },
    clickDesc(e) {
      if (!this.cfg.isCopyPicture) {
        return;
      }
      let imgNodeList = document.querySelectorAll('.course-dir-desc-parent img');
      let imgArr = [];
      for (let item of imgNodeList) {
        item.src && imgArr.push(item.src)
      }
      previewTimmer = setTimeout(() => {
        if (e.target.tagName == 'IMG' && e.target.src) {
          wxUtilJs.previewImage({
            current: e.target.src, // 当前显示图片的http链接
            urls: imgArr // 需要预览的图片http链接列表
          });
        }
      }, 200)
    },
    clickCover(e) {
      if (this.cfg.isCopyPicture == 0) return // 开启防复制功能 图片不能点击放大
      wxUtilJs.previewImage({
        current: this.dataInfo.courseAvatar, // 当前显示图片的http链接
        urls: [this.dataInfo.courseAvatar]
      });
    },
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.course;//this.ckFrom;
      let type = this.dataInfo.collage ? 3 : this.dataInfo.sales ? 2 : this.dataInfo.bargain ? 5 : 4;
      let cId = this.dataInfo.isFriendHelper ? this.dataInfo.faId : this.dataInfo.collage ? this.dataInfo.collage.collageId : this.dataInfo.bargain ? this.dataInfo.bargain.bargainId : this.dataInfo.sales.pId;
      let extId = 1; //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
      let proId = this.courseId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, extId: extId, proId: proId } });
    },
    audioCanplay(duration) {
      totalTime = duration;
      this.isCourseChange = false;
      // if (Number(this.dataInfo.items[this.currentIndex].curProgressRatio) != 1 && Number(this.dataInfo.items[this.currentIndex].curProgressRatio) != 0 && this.dataInfo.hasPermission == true) {
      //   this.audioPlayTime = Math.floor(this.dataInfo.items[this.currentIndex].curProgressRatio * totalTime);
      // } else if (this.dataInfo.hasPermission == true) {
      //   this.audioPlayTime = 0.1;
      // }
      this.longestTime = Math.floor(Number(this.dataInfo.items[this.currentIndex].progressRatio) * totalTime);
    },
    startPlay(playStatus) {
      this.playStatus = playStatus;
      if (this.dataInfo.hasPermission == true) {
        startSt = new Date().getTime();
        if (!this.distributionId) {
          this.setCourseProgress(this.currentIndex);
        }
        // 如果是训练营且完成条件是立即完成
        if( !this.distributionId && this.dataInfo.finishCondition==2){
          this.setCourseProgress(this.currentIndex);
          this.setProgress(this.dataInfo.items[this.currentIndex].detailId, 0, 0, 11);
          let timer = null
          timer = setTimeout(() => { // 需要延迟一会儿，进度没有同步那么快
            this.campDirectoryInitData(2)
            clearTimeout(timer);
          }, 1000);
        }
        // if (playedTimmer) {
        //   clearInterval(playedTimmer)
        // }
        // playedTimmer = setInterval(function() {
        //   playedDuration ++;
        // }, 1000)
      }
    },
    //记录课时学完的学员（仅调用一次）
    lessonMemberLog(detailId) {
      let data = {
        prodId: detailId,
        prodType: 111,
        cId: this.courseId,
        nickname: localStorage.getItem('userName') ? localStorage.getItem('userName') : ''
      }
      let postUrl = `${global.apiurl}analysis/course/lesson/memberLog`;
      utilJs.postMethod(postUrl, data, res => {
      });
    },
    //记录当前播放到哪一节
    setCourseProgress(tIndex) {
      let $this = this
      let data = {
        prodId: this.courseId,
        prodType: 5,
        innerIndex: this.is_courseListPagePrev ? (this.courseListPagePrev * 10 + tIndex) : tIndex
      };
      // let postUrl = `${global.apiurl}courses/${this.courseId}/learningPosition`;
      let postUrl = `${global.apiurl}analysis/course/positionLog`;
      utilJs.postMethod(postUrl, data, res => {
        $this.firstPosition = false;
        $this.learningPosition = tIndex;
        $this.handleCourseScroll();
      });
    },
    // 训练营进度
    setProgressRatio(progress, duration) {
      let data = {
        ttId: this.ttId, //营期ID
        tpId: this.tpId, //环节ID
        tlId: this.tlId, //课时ID
        ratio: (progress * 100).toFixed(0), //完成进度0-100
        duration: duration,
      };
      if (this.ttId && this.tpId && this.tlId) {
        utilJs.postMethod(
          global.apiurl + "k12/trainings/progress",
          data,
          function (res) { }
        );
      }
    },
    //记录播放进度 eType == 10 暂停进来的；训练营暂停时，如果进度超过100%，不能直接跳转下一节
    setProgress: function (detailId, progress, playedTime, eType) {
      const currentIndex = this.currentIndex
      let data = {
        prodId: detailId, //视频ID
        progress: Number(progress) > 0.95 ? 1 : progress, //完成进度
        duration: playedTime > 0 ? playedTime : 0,
        prodType: 111,
        cId: this.courseId,
        cType: this.distributionId ? 103 : 5
      }
      if (Number(progress) > 0.95 && Number(this.dataInfo.items[this.currentIndex].progressRatio) != 1) { //看95%以上就默认观看完成
        this.dataInfo.items[this.currentIndex].progressRatio = 1;
        this.lessonMemberLog(this.dataInfo.items[this.currentIndex].detailId) //这个接口每个课时只访问一次
      }
      let postUrl = `${global.apiurl}analysis/course/progressLog`;
      utilJs.postMethod(postUrl, data, res => {
        this.judgeCompliance()
        // 训练营闯关、定期模式：关联训练营的视频，播放到最后一节并且进度完成，需要自动解锁跳到下一节
        const curProgress = Number(progress) > 0.95 ? 1 : progress
        // 如果是训练营的，根据设置的条件的进度来判断是否解锁下一个
        if(this.ttId && this.tpId && this.tlId && this.dataInfo.finishCondition == 1 && Number(curProgress * 100) >= Number(this.dataInfo.allowPassPersent)){
          this.goNextCampLesson(currentIndex)
        }  else if (curProgress >= 1 && this.campButtonStatus && !this.campButtonStatus.isNextUnlock && !(eType == 10 && progress < 1)) {
          // 下一节未解锁才需要在提交进度后重新请求下一节状态
          this.goNextCampLesson(currentIndex, 1)
        }
      });
    },
    handleClickCertificate(){
      this.$refs.learnCerCom.drawNow('', this.courseId, global.ckFrom.voice)
    },
    judgeCompliance(){
      let postUrl = `${global.apiurl}Certificate/judgeCompliance?prodType=${global.ckFrom.voice}&prodId=${this.courseId}`;
      // enableStudyCard	number	
      // 是否有设置学习证书1=是；0=否	
      // isReceivedStudy	number	
      // 是否已经领取了证书：1=是；0=否	
      // isComplianceStudy	number	
      // 是否达到学习证书发放条件：1=是；0否	
      // studyHonorImage	string
      // 学习证书图片（如果领取了会有图片）	
      // enableBuyCard	number
      // 是否有设置入学证书1=是；0=否	
      // isReceivedBuy	number	
      // 是否已经领取了入学证书：1=是；0=否	
      // isComplianceBuy	number
      // 是否达到入学证书发放条件：1=是；0否	
      // buyHonorImage	string	
      // 入学证书证书图片（如果领取了会有图片）
      utilJs.getMethod(postUrl, res => {
        if (res.studyHonorImage || (res.enableStudyCard == 1 && res.isComplianceStudy == 1)) {
          this.showStudyCard = true
          this.isReceivedStudy = res.isReceivedStudy
          // this.$resf.learnCer.drawNow('', this.courseId, global.ckFrom.imgText,res.isReceivedStudy)
        }
        if(res.enableBuyCard==1&&res.isComplianceBuy==1&&res.isReceivedBuy==0){
          this.isReceivedBuy=res.isReceivedBuy
          let enrolCerLoca =global.ckFrom.voice+'-'+this.courseId
          if(JSON.parse(localStorage.getItem("enrolCer"))==enrolCerLoca){
              return
          }else{
            this.$refs.enrolcerCom.drawNow('', this.courseId, global.ckFrom.voice)
          }
        }
      });
    },
    goVipBuy(cmpId, type) {
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUp",
        query: { 'prodId': cmpId, 'type': type }
      });
    },
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
    },
    hideCourseList() {
      // let v = document.querySelector("video");
      // v.classList.remove('remove-video');
      this.showCourseList = false;
    },
    clickHideSearch(barNumber) {
      if (barNumber == 1) {
        this.searchWord = '';
        this.showSearch = false;
      } else if (barNumber == 2) {
        this.searchWordDirType = '';
        this.showSearchDirType = false;
      }
    },
    clickShowSearch(barNumber) {
      if (barNumber == 1) {
        this.showSearch = true;
        this.$nextTick(function () {
          this.$refs.searchContent.focus();
        });
      } else if (barNumber == 2) {
        this.showSearchDirType = true;
        this.$nextTick(function () {
          this.$refs.searchContentDirType.focus();
        });
      }
      if ((this.is_courseListPage || this.is_courseListPagePrev) && !this.distributionId) {
        if (this.courseListLoading) {
          return;
        }
        let postUrl = `${global.apiurl}courses/${this.courseId}/dirs?searchAll=1&courseType=1&hasPermission=${this.dataInfo.hasPermission}`;
        if (this.accessToken) {
          postUrl = postUrl + '&accessToken=' + this.accessToken;
        }
        this.courseListLoading = true;
        utilJs.getMethod(postUrl, res => {
          this.dataInfo.items = res;
          if (this.is_courseListPagePrev) {
            this.currentIndex = this.currentIndex + this.courseListPagePrev * 10;
            this.learningPosition = this.currentIndex;
          }
          this.courseListLoading = false;
          this.is_courseListPage = false;
          this.is_courseListPagePrev = false;
          this.courseListPage = Math.floor(this.dataInfo.dirCount / 10) + 1;
          this.courseListPagePrev = 1;
        })
      }
    },
    showCL() {
      document.getElementById('scrollCourse1').addEventListener('scroll', this.handleScroll);
    },
    popCourseList() {
      this.showCourseList = true;
      this.searchWord = "";
      this.showSearch = false;
      this.showCL()
      this.$nextTick(function () {
        setTimeout(() => {
          document.getElementById('scrollCourse1').scrollTop = document.querySelectorAll(".chapt-item") && document.querySelectorAll(".chapt-item")[this.currentIndex] && (document.querySelectorAll(".chapt-item")[this.currentIndex].offsetTop - 40 > 0) ? document.querySelectorAll(".chapt-item")[this.currentIndex].offsetTop - 40 : 2;
        }, 200)
      })
    },
    hideColumnList() {
      this.showColumnList = false;
    },
    popColumnList() {
      this.showColumnList = true;
      this.isInitData = true;
      // 来源是专栏且没有课程权限
      if (this.dataInfo && !this.dataInfo.hasPermission && this.extId) {
        return
      }
    },
    //点击回到顶部
    clickScrollTop() {
      window.scrollTo(0, 0);
    },
    //试看时间结束，判断是否有试看权限 && 试看时间大于0 && 当前播放的是第一节
    watchEnd() {
      if (
        !this.dataInfo.hasPermission &&
        this.dataInfo.items[this.currentIndex].watchPermission == 1 &&
        (this.dataInfo.items[this.currentIndex].watchTime > 0 || this.dataInfo.items[this.currentIndex].watchTimeSeconds > 0) &&
        this.dataInfo.items[this.currentIndex].isPreview == 1
      ) {
        // this.$showCjToast({
        //   text: "可试听结束",
        //   type: 'text',
        //   isShowMask: true,
        //   time: 3000
        // });
        this.showTryEnd = true;
      }
    },
    getNoticeText(){
      let noticeText = '';
      if(this.isStoreUserGroup){
        if(this.dataInfo.payType != 2){
          noticeText="指定组织成员可观看";
        } else {
          noticeText="指定组织成员可购买";
        }
      } else if(this.isUserGroup){
        if(this.dataInfo.payType != 2){
          noticeText="指定用户可观看";
        } else {
          noticeText="指定用户可购买";
        }
      } else if(this.isOffSale){
        noticeText = "该课程已下架！";
      } else if(this.hasExpired){
        noticeText = "该课程已失效！";
      } else {
        noticeText = '该课程暂未开售！';
      }
      return noticeText;
    },
    //点击音频组件，判断有没有权限，没权限则跳到购买页
    clickNoPermission() {
      //已下架 || 已失效 || 定时上架
      if (this.isOffSale || this.hasExpired || this.timingPutOn || this.isUserGroup || this.isStoreUserGroup) {
        let noticeText =  this.getNoticeText();
        this.$showCjToast({
          text: noticeText,
          type: 'text'
        });
        return
      }
      if (!(this.dataInfo.items && this.dataInfo.items.length > 0)) {
        this.$showCjToast({
          text: '暂无可播放内容，请联系管理员',
          type: 'text',
        });
        return
      }
      if (!this.checkPlayPermission()) {
        if(this.dataInfo.payType==3 && this.dataInfo.items && this.dataInfo.items.length > 0){
          this.inputPsw()
        } else if (this.dataInfo.payType != 3) {
          if (this.fromColumnId > -1) {
            this.popColumnList();
          } else {
            this.$showCjToast({
              text: '购买后可以收听此课程的所有音频',
              type: 'text',
            });
          }
          // this.clickBuyNow();
        }
      }
    },
    onPlayTimeChange(playTime, allTime) {
      if (!this.dataInfo.items[this.currentIndex].goProcess && Number(this.dataInfo.items[this.currentIndex].curProgressRatio) != 1 && Number(this.dataInfo.items[this.currentIndex].curProgressRatio) != 0 && this.dataInfo.hasPermission == true) {
        this.audioPlayTime = Math.floor(this.dataInfo.items[this.currentIndex].curProgressRatio * totalTime);
      }
      this.dataInfo.items[this.currentIndex].goProcess = true;
      curPlayTime = playTime;
      this.timePercent = totalTime > 0 ? (curPlayTime / totalTime) * 100 : 0;
      // if(this.dataInfo.items[this.currentIndex].curProgressRatio != 1 && this.dataInfo.items[this.currentIndex].curProgressRatio != 0 && this.dataInfo.hasPermission == true && !this.hasAlltime && allTime != 0) {
      //   this.hasAlltime = true;
      //   this.audioPlayTime = Math.floor(this.dataInfo.items[this.currentIndex].curProgressRatio * allTime);
      // }
      // if (progress1 <= 1 && allTime != 0) {
      //   progress1 = Number(playTime / allTime).toFixed(2);
      // }
    },
    //音频播放结束，判断播放类型为单曲循环还是顺序循环播放
    audioPlayEnd(e) {
      this.dataInfo.items[this.currentIndex].goProcess = false;
      //播放过程中直接关掉开放标签，会触发pause和end事件
      if (totalTime != 0 &&  Number(curPlayTime / totalTime).toFixed(2) < 0.95) {
        return;
      }
      if (!this.dataInfo.hasPermission && !(this.dataInfo.items[this.currentIndex+1] && this.dataInfo.items[this.currentIndex+1].isPreview == 1 && this.currentIndex != (this.dataInfo.dirCount - 1))) {
        this.showTryEnd = true;
        return;
      }
      if (this.dataInfo.hasPermission) {
        if (Number(this.dataInfo.items[this.currentIndex].progressRatio) != 1) {
          this.dataInfo.items[this.currentIndex].progressRatio = 1;
          this.lessonMemberLog(this.dataInfo.items[this.currentIndex].detailId) //这个接口每个课时只访问一次
        }
        this.dataInfo.items[this.currentIndex].curProgressRatio = 1;
      }
      // 有权限在专栏下的课程 播放到最后一个且不是循环播放 后续跳转到下一个课程
      if (this.dataInfo.hasPermission && this.columnPermission && this.fromColumnId > -1 && this.nextLessons && this.nextLessons.item && (this.currentIndex == (this.dataInfo.dirCount - 1)) && this.playType == 1) {
        //下一个课程如果是视频，则要跳到视频页面
        if (this.nextLessons.item.courseType != 1 || (this.nextLessons.item.courseType == 1 && !(this.cfg && this.cfg.audioAutoPlay == 1 && this.dataInfo.hasPermission))) {
          this.goColumnCourse(this.nextLessons.item, this.nextLessons.index)
        } else {
          this.initData(false)
        }
        return;
      }
      // 播放到最后一节音频，并且下一个学习任务已解锁，直接跳转到下一个学习任务
      if (this.playType == 1 && this.dataInfo.hasPermission && this.campButtonStatus && this.campButtonStatus.campPermission && this.campButtonStatus.isNextUnlock && this.currentIndex == (this.dataInfo.dirCount - 1)) {
        this.goNextCampLesson(this.currentIndex, 1)
        return
      }
      if (this.playType == 1 || (!this.dataInfo.hasPermission && this.dataInfo.items[this.currentIndex+1] && this.dataInfo.items[this.currentIndex+1].isPreview == 1 && this.currentIndex != (this.dataInfo.dirCount - 1))) {
        if (this.dataInfo.hasPermission || (this.dataInfo.items[this.currentIndex+1] && this.dataInfo.items[this.currentIndex+1].isPreview == 1 && this.currentIndex != (this.dataInfo.dirCount - 1))) {
          if (this.dataInfo.items[this.currentIndex+1].chapterId && this.dataInfo.items[this.currentIndex+1].chapterSort == 1 && this.dataInfo.items[this.currentIndex+1].showStatus == 'hide') {
            for (let i = 0; i < this.dataInfo.items[this.currentIndex+1].cnt; i++) {
              if (this.dataInfo.items[this.currentIndex + 1 + i] && this.dataInfo.items[this.currentIndex + 1 + i].chapterId == this.dataInfo.items[this.currentIndex+1].chapterId) {
                this.$set(this.dataInfo.items[this.currentIndex + 1 + i], "showStatus", 'show');
              }
            }
          }
        }
        this.seeVoice(this.currentIndex + 1, 0, 1);
        // if (this.learningPosition != null && $this.firstPosition == true) {
        //   this.seeVoice(this.learningPosition);
        // }
      } else if (this.playType == 2) {
        if (this.dataInfo.hasPermission == true && curPlayTime != 0 && startSt != 0) {
          if (totalTime != 0) {
            endSt = new Date().getTime();
            playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
            this.setProgress(this.dataInfo.items[this.currentIndex].detailId, 1, playedDuration);
            this.isShareInt(playedDuration);
            if (this.companyAuth.pointModel == 2 && this.companyAuth.enableWatchListen == 1) {
              this.shareGetIntegration(this.courseId, this.dataInfo.items[this.currentIndex].detailId, 60, -1);
            }
            if (this.companyAuth.pointModel == 2 && this.companyAuth.enableTotalWatchCourse == 1) {
              this.shareGetIntegration(this.courseId, this.dataInfo.items[this.currentIndex].detailId, 63, playedDuration);
            }
            startSt = 0;
            endSt = 0;
            playedDuration = 0;
            // playedTimmer = null;
          }
        }
        this.$refs.audioCom.rePlay();
      }
    },
    //上一节
    clickBefor() {
      if (!this.checkPlayPermission()) {
        return;
      }
      this.seeVoice(this.currentIndex - 1);
    },
    //下一节
    clickAfter() {
      if (!this.checkPlayPermission()) {
        return;
      }
      this.seeVoice(this.currentIndex + 1);
    },
    //检验是否有播放权限
    checkPlayPermission() {
      return (
        this.dataInfo.items && this.dataInfo.items.length > 0 &&
        (this.dataInfo.hasPermission ||
        (this.dataInfo.items[this.currentIndex].watchPermission == 1 &&
          (this.dataInfo.items[this.currentIndex].watchTime > 0 || this.dataInfo.items[this.currentIndex].watchTimeSeconds > 0) &&
          this.dataInfo.items[this.currentIndex].isPreview == 1) ||
        (this.dataInfo.items[this.currentIndex].allowWholeWatch == 1 &&
          this.dataInfo.items[this.currentIndex].isPreview == 1) ||
        (this.dataInfo.allowWholeWatch == 1 &&
          this.distributionId &&
          this.currentIndex == 0))
      );
    },
    //检验是否有完整播放权限
    checkWholePlayPermission() {
      //分销不做小程序后台播放
      if (this.distributionId) {
        this.showPlayBack = false;
        return;
      }
      //分销第一节可试听
      if (
        this.dataInfo.items && this.dataInfo.items.length > 0 &&
        (this.dataInfo.hasPermission ||
        (this.dataInfo.items[this.currentIndex].allowWholeWatch == 1 &&
          this.dataInfo.items[this.currentIndex].isPreview == 1))
      ) {
        this.showPlayBack = true;
      } else {
        this.showPlayBack = false;
      }
    },
    //检验是否有试听权限
    checkAuditionPermission() {
      //分销第一节可试听
      if (!this.dataInfo.hasPermission && this.dataInfo.items && this.dataInfo.items.length > 0 && this.dataInfo.items[this.currentIndex].isPreview == 1 &&
        ((this.dataInfo.items[this.currentIndex].watchPermission == 1 && (this.dataInfo.items[this.currentIndex].watchTime > 0 || this.dataInfo.items[this.currentIndex].watchTimeSeconds > 0)) ||
          (this.dataInfo.items[this.currentIndex].allowWholeWatch == 1) ||
          (this.distributionId && this.dataInfo.allowWholeWatch == 1))) {
        this.hasAuditionPermission = true;
      } else {
        this.hasAuditionPermission = false;
      }
    },
    //分页请求课程后传给后台
    addMoreCourse(addCourse) {
      let appData = {
        addCourseList: addCourse
      }
      utilJs.sendDataToApp('appAudioAddCourseList', appData)
    },
    //设置app播放信息
    setAppAudioInfo() {
      if (this.isAndroidAudioApp || this.isIosAudioApp) {
        let appAudioInfo = {
          audioList: this.dataInfo.items,//音频列表
          playType: this.playType,//播放方式 0单节播放 1 顺序循环 2 单曲循环
          courseId: this.courseId,//课程id
          cType: this.distributionId ? 103 : 5,//分销课程或普通课程
          prodType: 111,
          isCopy: this.dataInfo.isCopy
        }

        if (!this.dataInfo.hasPermission && this.dataInfo.items[this.currentIndex].watchPermission == 1 && (this.dataInfo.items[this.currentIndex].watchTime > 0 || this.dataInfo.items[this.currentIndex].watchTimeSeconds > 0)) {
          //没权限可试听
          appAudioInfo.watchTime = Number(this.dataInfo.items[this.currentIndex].watchTime) + Number(this.dataInfo.items[this.currentIndex].watchTimeSeconds ? Number(this.dataInfo.items[this.currentIndex].watchTimeSeconds / 60).toFixed(2) : 0);
        } else if (!this.dataInfo.hasPermission && this.dataInfo.items[this.currentIndex].allowWholeWatch == 1) {
          //没权限 可整节试听
          appAudioInfo.allowWholeWatch = 1;
        }
        this.appAudioInfo = appAudioInfo;
      }
    },

    // // 限时购倒计时
    falshSalesTime(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.dataInfo.bargain.status = status
      }
    },
    // // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.dataInfo.sales) {
        this.dataInfo.sales.sales.status = status;
        if (status == 2) {
          this.ckFrom = this.dataInfo.columnId == 0 ? global.ckFrom.flashSalesCourse : global.ckFrom.flashSalesColumn;
        }
      } else if (this.dataInfo.collage) {
        this.dataInfo.collage.status = status
      } else if (this.dataInfo.isFriendHelper) {
        this.faStatus = status;
      } else if (this.dataInfo.bargain) {
        this.getVoiceDetail();
      }
      // 活动已结束，清空所有营销活动信息及状态
      if (status == -1) {
        this.dataInfo.sales = null;
        this.dataInfo.collage = null;
        this.dataInfo.isFriendHelper = false;
        this.ckFrom = this.dataInfo.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
      }
    },
    initShowMore() {
      this.$nextTick(() => {
      });
    },
    //回退到上级(知识套餐独有),不支持单独售卖
    backPackage: function (showType=0) {
      this.relateShowType = showType;
      this.showTryEnd = false;
      this.showCombo = true;
    },
    closeCombo: function () {
      this.showCombo = false;
    },
    //友情灌溉
    goHelpDetail: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.helpBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.faStatus == 1) {
        this.$showCjToast({
          text: '活动未开始，暂不能助力领取！',
          type: 'text'
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/task/task",
          query: {
            faId: this.dataInfo.faId,
            refereeId: localStorage.getItem("userId")
          }
        });
      }
    },
    //更改播放类别
    changePlayType: function () {
      if (this.playType == 0) {
        // 小陌修改需求：从训练营或专栏进入的，无论有几节视频或音频，都是有单节播放、单节循环、顺序播放，这三种播放类型
        if (this.dataInfo.dirCount > 1 || this.fromColumnId > -1 || this.ttId) {
          this.playType = 1;
        } else {
          this.playType = 2;
        }
      } else if (this.playType == 1) {
        this.playType = 2;
      } else if (this.playType == 2) {
        this.playType = 0;
      }
    },
    moreDeviceScroll() {
      let bWidth = document.getElementById('app').clientWidth;
      let moreDeviceHeight = (bWidth / 16) * 2;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let deviceOffsetTop =
      document.querySelector("#moreDevice").offsetTop != null
          ? document.querySelector("#moreDevice").offsetTop
          : 0;
      let infoOffsetTop =
      document.querySelector("#courseInfo").offsetTop != null
          ? document.querySelector("#courseInfo").offsetTop
          : 0;
      let audioBoxHeigh = document.querySelector("#coverWrap")
          ? document.querySelector("#coverWrap").offsetHeight
          : 0;
      console.log('zzzzz', deviceOffsetTop, infoOffsetTop, audioBoxHeigh)
      if (deviceOffsetTop > 0) {
        if (scrollTop >= (deviceOffsetTop + moreDeviceHeight) && this.cfg.enableVideoTop == 0) {
          this.moreDeviceType = 2;
        } else if (this.cfg.enableVideoTop == 0) {
          this.moreDeviceType = 1;
        }
        if (scrollTop >= (deviceOffsetTop + moreDeviceHeight - audioBoxHeigh) && this.cfg.enableVideoTop == 1) {
          this.moreDeviceType = 2;
        } else if (this.cfg.enableVideoTop == 1) {
          this.moreDeviceType = 1;
        }
      }
    },
    //typeBar样式置顶
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var offsetTop =
        document.querySelector("#tabhBar") && document.querySelector("#tabhBar").offsetTop != null
          ? document.querySelector("#tabhBar").offsetTop
          : 68;
      let offsetTop1 =
        document.querySelector("#oTop") && document.querySelector("#oTop").offsetTop != null
          ? document.querySelector("#oTop").offsetTop
          : 68;
      var audioBoxHeigh = document.querySelector("#coverWrap")
          ? document.querySelector("#coverWrap").offsetHeight
          : 0;
      let bWidth = document.getElementById('app').clientWidth;
      let topBarHeight = (bWidth / 16) * 1.7;
      if (this.styleType == 2 && offsetTop > 0) {
        if (scrollTop >= offsetTop && this.cfg.enableAudioPlayerTop == 0) {
          this.tabhBarFixed = true;
        } else if (this.cfg.enableAudioPlayerTop == 0) {
          this.tabhBarFixed = false;
        }
        if (scrollTop >= (offsetTop - audioBoxHeigh - (this.showNavBar ? topBarHeight : 0)) && this.cfg.enableAudioPlayerTop == 1) {
          this.tabhBarFixed = true;
        } else if (this.cfg.enableAudioPlayerTop == 1) {
          this.tabhBarFixed = false;
        }
      }
      if (scrollTop >= offsetTop1 && this.cfg && this.cfg.enableAudioPlayerTop != 1 && this.dataInfo.hasPermission) {
        this.showBottomPlayer = true;
      } else {
        this.showBottomPlayer = false;
      }
      if (scrollTop > lastScroll + 10) { //向下
        lastScroll = scrollTop;
        this.bottomBuyDirection = 2;
        if (scrollTop > 60) {
          this.scrollDirection = 1;
        }
      }
      if (scrollTop < lastScroll) { // 向上
        lastScroll = scrollTop;
        this.bottomBuyDirection = 3;
        if (scrollTop < 40) {
          this.scrollDirection = 0;
        }
      }
      // utilJs.handleLoading(() => {
      //   if (this.is_courseListPage == true && this.typeBar == 1 && this.cfg && this.cfg.dirType == 2) {
      //     this.getCourseList();
      //   }
      // });
      // let listScrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      // if (listScrollTop <= 0 && this.is_courseListPagePrev == true && this.typeBar == 1 && this.cfg && this.cfg.dirType == 2) {
      //   this.getCourseList(1);
      // }
      this.handleCourseScroll()
      // if (document.querySelector("#moreDevice")) {
      //   this.moreDeviceScroll();
      // }
    },
    handleCourseScroll() {
      //回到当前学习标签
      let pageWidth = document.body.clientWidth;
      let xscrollLeft = 0, yscrollTop = 0;
      let $this = this
      // 当页回到当前学习显示隐藏处理
      if (!($this.cfg && $this.cfg.dirType == 2)) {
        let currentScrollLeft = document.getElementById('scrollCourse') && document.getElementById('scrollCourse').childNodes[$this.learningPosition] ? document.getElementById('scrollCourse').childNodes[$this.learningPosition].offsetLeft : 0;// 获取当页当前学习课程位移
        xscrollLeft = document.getElementById('scrollCourse') ? document.getElementById('scrollCourse').scrollLeft : 0;
        let lastScrollLeft = document.getElementById('scrollCourse').childNodes[$this.dataInfo.items.length - 1] ? document.getElementById('scrollCourse').childNodes[$this.dataInfo.items.length - 1].offsetLeft : 0;// 获取最后课程的位移
        let firstItemWidth = document.getElementById('scrollCourse').childNodes[0] ? document.getElementById('scrollCourse').childNodes[0].offsetWidth : 0;//  获取第一个课程的宽度
        let clientWidth = document.getElementById('scrollCourse') ? document.getElementById('scrollCourse').clientWidth : 0;
        if (xscrollLeft > 0) {
          $this.showLearnSign = ((xscrollLeft < (currentScrollLeft - pageWidth)) || (xscrollLeft > (currentScrollLeft + pageWidth / 2))) ? true : false;
        }
        if ((xscrollLeft > lastScrollLeft + firstItemWidth - clientWidth - 10) && (firstItemWidth > 0) && $this.is_courseListPage && !$this.courseListLoading && !$this.distributionId && !(($this.isAndroidAudioApp || $this.isIosAudioApp)  && !($this.isAndroidVideoApp || $this.isIosVideoApp))) {
          $this.getCourseList();
        }
        if (xscrollLeft <= 0 && $this.typeBar == 1 && $this.is_courseListPagePrev && !$this.courseListLoading && !$this.distributionId && !(($this.isAndroidAudioApp || $this.isIosAudioApp)  && !($this.isAndroidVideoApp || $this.isIosVideoApp))) {
          $this.getCourseList(1);
        }
      }
      // 弹窗回到当前学习显示隐藏处理
      if (document.getElementById('scrollCourse1')) {
        let currentScrollTop1 = document.querySelectorAll(".chapt-item") && document.querySelectorAll(".chapt-item")[$this.learningPosition] ? document.querySelectorAll(".chapt-item")[$this.learningPosition].offsetTop : 0;// 获取弹窗当前学习课程位移
        yscrollTop = ($this.dataInfo.items && $this.dataInfo.items.length > 2 && document.getElementById('scrollCourse1')) ? document.getElementById('scrollCourse1').scrollTop : 0;
        // let scrollHeight1 = document.getElementById('scrollCourse1').scrollHeight;
        // let clientHeight1 = document.getElementById('scrollCourse1').clientHeight
        $this.showLearnSign1 = ((yscrollTop < (currentScrollTop1 - 400)) || (yscrollTop > (currentScrollTop1 + 100))) ? true : false;
        // if ((yscrollTop + clientHeight1 > scrollHeight1 - 20) && (clientHeight1 > 0) && $this.is_courseListPage && !$this.courseListLoading && !$this.distributionId && !(($this.isAndroidAudioApp || $this.isIosAudioApp)  && !($this.isAndroidVideoApp || $this.isIosVideoApp))) {
        //   $this.getCourseList();
        // }
      }
      // if ($this.showCourseList && yscrollTop == 0 && $this.is_courseListPagePrev && !$this.courseListLoading && !$this.distributionId) {
      //   $this.getCourseList(1);
      // }
    },
    handleRelatedScroll() {
      let xscrollLeft = document.getElementById('relatedScroll') ? document.getElementById('relatedScroll').scrollLeft : 0;
      let lastScrollLeft = document.getElementById('relatedScroll').childNodes[4] ? document.getElementById('relatedScroll').childNodes[4].offsetLeft : 0;// 获取最后课程的位移
      let firstItemWidth = document.getElementById('relatedScroll').childNodes[0] ? document.getElementById('relatedScroll').childNodes[0].offsetWidth : 0;//  获取第一个课程的宽度
      let clientWidth = document.getElementById('relatedScroll') ? document.getElementById('relatedScroll').clientWidth : 0;
      let parentLeft = (document.getElementById('app').clientWidth / 16) * 0.6;
      if ((xscrollLeft > (lastScrollLeft + firstItemWidth - clientWidth - parentLeft - 10)) && (firstItemWidth > 0)) {
        this.popRelate();
      }
    },
    gcd: function (cinfo) {
      let hfs = this.dataInfo.isRelForm && !this.dataInfo.hasFormLog;
      this.$routerGo(this, "push", {
        path: "/homePage/collage/collageDetail",
        query: { 'groupId': cinfo.groupId, 'collageId': cinfo.collageId, ckFrom: this.ckFrom, isRelForm: hfs, extId: this.extId, relType: 4, recRelateId: this.recRelateId, recType: this.recType }
      });
    },
    gcd: function (cinfo) {
      this.goCollageDetail(cinfo.groupId, cinfo.collageId);
    },
    //跳转拼团详情
    goCollageDetail: function (groupId, collageId) {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (
        this.dataInfo.collage.userType != -1 &&
        this.dataInfo.collage.groupId != groupId
      ) {
        this.$showCjToast({
          text: "您已在拼团中，不需要再去拼单啦！",
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: "活动未开始，暂不能拼团！",
            type: 'text'
          });
        } else {
          let hfs = this.dataInfo.isRelForm && !this.dataInfo.hasFormLog;
          let pathQuery = {
            groupId: groupId,
            collageId: collageId,
            isRelForm: hfs,
            extId: this.extId,
            relType: 4,
            recRelateId: this.recRelateId,
            recType: this.recType
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    goBuy: function () {
      if (this.isStoreUserGroup) {
        this.$showCjToast({
          text: '指定组织成员可以购买',
          type: 'text'
        });
        return;
      }
      if (this.isUserGroup) {
        this.$showCjToast({
          text: '指定用户可以购买',
          type: 'text'
        });
        return;
      }
      if (this.dataInfo.collage.userType != -1 && this.dataInfo.collage.groupId != groupId) {
        this.$showCjToast({
          text: '您已在拼团中，不需要再去拼单啦！',
          type: 'text'
        });
      } else {
        if (this.dataInfo.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'text'
          });
        } else {
      //要加判断是否选择阶梯
          if (this.dataInfo.collage && this.dataInfo.collage.collageGroupType == 1 ) {
            this.dataInfo.collage.courseType=this.dataInfo.courseType
            this.$refs.collageGrades.goChoseBuy()
          } else {
            this.dataInfo.collage.courseType=this.dataInfo.courseType
            this.$refs.collageGrades.showBuy()
            // this.isShowBuy = true; //选择阶梯
          }
        }
      }
    },
    changeType: function (type, changeDir) {
      //this.typeBar = typeBar;
      if (this.typeBar != type) {
        this.moveDirection = changeDir;
        this.typeBar = type;
        // this.handleScroll();
        // window.scrollTo(0, 310);
        if (type == 1 && document.getElementById('scrollCourse')) { //课程目录滚动到当前播放的音频
          this.$nextTick(() => {
            document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[this.currentIndex] && (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) > 0 ? (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) : 5;
          });
        }
        if (type == 1 && document.getElementById('scrollCourseVtr') && document.getElementById('scrollCourseVtr').childNodes[this.currentIndex] && this.styleType == 1) {
          this.$nextTick(() => {
            document.documentElement.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
            document.body.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
          });
        }
      }
      return false;
    },
    clickColumnItem() {
      //跳转到专栏
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: {
          cId: -1,
          ckFrom: global.ckFrom.column,
          extId: this.extId,
          distributionId: this.distributionId
        }
      });
    },
    //邀请好友
    inviteFriends: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let ckFrom = global.ckFrom.course;
      let extId = 1; //this.ckFrom == global.ckFrom.course ? 1 : this.extId;
      let cId = this.courseId;
      let queryT = { cId: cId, extId: extId, ckFrom: ckFrom, courseType: 1 }
      if (this.dataInfo.isSaleOut == 0) {
        queryT.isNoSale = true;
      }
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: queryT
      });
    },
    //添加观看记录
    watchRecord: function () {
      let data = {
        ckFrom: this.distributionId ? 55 : 5,
        extId: this.extId,
        cId: this.courseId
      };
      utilJs.postMethod(global.apiurl + "common/playRecord", data, function (
        res
      ) { });
    },
    //点赞
    clickLikes: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.collectBind) {
        if (utilJs.goBindMobile()) return; 
      }
      if (!this.dataInfo.isLike) {
        let $this = this;
        let postUrl = `${global.apiurl}courses/${this.courseId}/likes`;
        if (this.distributionId) {
          postUrl = `${global.apiurl}distributionMarkets/${this.distributionId}/subs/${this.courseId}/incrLikes`;
        }
        utilJs.postMethod(postUrl, {}, function (res) {
          $this.dataInfo.likes += 1;
          $this.dataInfo.isLike = true;
          $this.$showCjToast({
            text: "点赞成功",
            type: "success"
          });
        });
      } else {
        this.$showCjToast({
          text: "您已点赞",
          type: 'text'
        });
      }
    },
    clickCommentBtn() {
      this.addComment();
      if (this.styleType == 2) {
        this.$nextTick(() => {
          var commentOffsetTop =
            document.getElementById("commentWrap")
              ? document.getElementById("commentWrap").offsetTop
              : 0;
          var audioBoxHeigh = document.querySelector("#coverWrap")
            ? document.querySelector("#coverWrap").offsetHeight
            : 0;
          if (this.cfg && this.cfg.enableAudioPlayerTop == 1) {
            window.scrollTo(0, commentOffsetTop - audioBoxHeigh - 640 * 1.9 / 16)
          } else {
            window.scrollTo(0, commentOffsetTop - 640 * 1.9 / 16)
          }
        })
      }
    },
    //领取积分
    getIntegration: function () {
      if (curPlayTime >= 60) {
        let duration = parseInt(curPlayTime / 60);
        this.shareGetIntegration(
          this.courseId,
          this.dataInfo.items[this.currentIndex].detailId,
          4,
          duration
        );
      } else {
        this.$showCjToast({
          text: "请先收听音频至少1分钟，再领取" + this.companyAuth.integrateName1 + "！",
          type: 'text'
        });
      }
    },
    clickBuyNow(isShowPresent, selectNum = 0) {
      this.isShowPresent = isShowPresent || false;
      if (!utilJs.isOpenIosGzhPay(this.ckFrom)) {
        this.$store.commit('updateShowVitualModal', true);
        return;
      }
      if (
        !(
          this.dataInfo.hasPermission == true ||
          (!this.dataInfo.hasPermission == false && this.dataInfo.items && this.dataInfo.items.length > 0 &&
            this.dataInfo.items[this.currentIndex].watchPermission == 1 &&
            (this.dataInfo.items[this.currentIndex].watchTime > 0 || this.dataInfo.items[this.currentIndex].watchTimeSeconds > 0) &&
            this.dataInfo.items[this.currentIndex].isPreview == 1) ||
          (!this.dataInfo.hasPermission && this.dataInfo.items && this.dataInfo.items.length > 0 &&
            this.dataInfo.items[this.currentIndex].allowWholeWatch == 1 &&
            this.dataInfo.items[this.currentIndex].isPreview == 1)
        ) &&
        this.dataInfo.isSaleOnly == 0
      ) {
        this.$showCjToast({
          text: "请先购买相关专栏、知识套餐或训练营",
          type: 'text'
        });
        return;
      }
      if (
        selectNum == 0 &&
        this.isShowPresent == false &&
        this.dataInfo.hasPermission == false &&
        (this.ckFrom == this.cfrom.collageCourse ||
          this.ckFrom == this.cfrom.collageColumn) &&
        this.dataInfo.collage != null &&
        this.dataInfo.collage.status == 2 &&
        this.dataInfo.collage.userType != -1
      ) {
        this.goCollageDetail(
          this.dataInfo.collage.groupId,
          this.dataInfo.collage.collageId
        );
      } else {
        // 判断体验版是否到期，到期之后不可购买商品
        if (utilJs.alertShopExpire(this, utilJs.getTimeByDate(this.companyAuth.expireTime))) return true;
        // 判断是否是自己推荐自己
        if (!this.distributionId && this.dataInfo.recommend.isExist && this.recRelateId && (this.$route.query.refereeId == localStorage.getItem("userId"))) {
          this.$showCjToast({
            text: "不能邀请自己支付",
            type: "warn",
          });
          return true;
        }
        let ckFrom =
          this.ckFrom == this.cfrom.collageCourse
            ? this.cfrom.course
            : this.ckFrom == this.cfrom.collageColumn
              ? this.cfrom.column
              : this.ckFrom;
        let extId =
          this.ckFrom == this.cfrom.collageCourse
            ? -1
            : this.ckFrom == this.cfrom.collageColumn
              ? this.extId
              : this.extId;
        let cId = this.courseId;
        let pId =
          this.ckFrom == this.cfrom.flashSalesCourse
            ? this.dataInfo.sales.pId
            : null;
        if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
          let pathQuery = {
            cId: cId,
            extId: extId,
            ckFrom: ckFrom,
            isFromInvite: 0,
            isGoPay: this.dataInfo.isRelForm ? false : true,
            recRelateId: this.recRelateId,
            recType: this.recType,
            courseType: this.dataInfo.courseType,
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          if (this.ckFrom == this.cfrom.flashSalesCourse && (!this.optimal || (this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true)) {
            pathQuery.pId = pId;
          } else if (this.optimal && this.optimal.optimalPriceType != 101) {
            pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : 5;
          }
          utilJs.goBindMobile(pathQuery);
          return;
        }
        //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址
        ckFrom =
          this.isShowPresent == true
            ? this.cfrom.presentCourse
            : this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column
              ? this.cfrom.course
              : ckFrom;
        extId =
          this.isShowPresent == true
            ? -1
            : this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column
              ? -1
              : extId;
        // 有关联表单，则跳到报名表单处
        if (
          (this.dataInfo.collectPage==1 || (this.dataInfo.collectPage==2 && selectNum > 0))&&this.dataInfo.collectPage != 3 &&this.dataInfo.isRelForm == true && this.dataInfo.hasFormLog == false && localStorage.getItem("showForm") == 1
        ) {
          this.goForm(this.isShowPresent, '', selectNum);
        } else {
          let pathQuery = {
            cId: cId,
            extId: extId,
            ckFrom: ckFrom,
            isFromInvite: 0,
            courseType: this.dataInfo.courseType,
            recRelateId: this.recRelateId,
            recType: this.recType
          };
          if (this.ckFrom == this.cfrom.flashSalesCourse && ((this.optimal && this.optimal.optimalPriceType == 101) || this.isShowPresent == true)) {
            pathQuery.pId = pId;
          } else if (this.optimal && this.optimal.optimalPriceType != 101) {
            pathQuery.ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : 5;
          }
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          if (selectNum > 0) {  //企业团购
            pathQuery.isGroupPurchase = true;
            pathQuery.groupSelectNum = selectNum;
            pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
          }
          // 处理专栏信息下单买课程得标记
          if (this.fromColumnId > -1) {
            pathQuery.rePlaceDetailUrl = 1
          }
          this.$routerGo(this, "push", {
            path: "/homePage/course/coursePay",
            query: pathQuery
          });
        }
      }
    },
    studyGoForm() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        if (utilJs.goBindMobile({
            cId: this.courseId,
            extId: this.extId,
            ckFrom: this.ckFrom,
            isFromInvite: 0,
            isGoPay: false
        })) return;
      }
      this.goForm();
    },
    //跳转到表单
    goForm: function (isShowPresent, bargainId, selectNum = 0) {
      this.isShowPresent = isShowPresent || false;
      let ckFrom = this.ckFrom == this.cfrom.collageCourse ? this.cfrom.course : (this.ckFrom == this.cfrom.collageColumn ? this.cfrom.column : this.ckFrom);
      let extId = this.ckFrom == this.cfrom.collageCourse ? -1 : (this.ckFrom == this.cfrom.collageColumn ? this.extId : this.extId);
      let cId = this.courseId;
      let pId = this.ckFrom == this.cfrom.flashSalesCourse ? this.dataInfo.sales.pId : null;
      //把课程类型放到extId里面，目的是为了邀请卡的分享链接地址 限时购pid隐藏
      ckFrom = this.isShowPresent == true ? this.cfrom.presentCourse : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? this.cfrom.course : ckFrom);
      extId = this.isShowPresent == true ? -1 : (this.dataInfo.isFreeInColumn == 2 && ckFrom == this.cfrom.column ? -1 : extId);
      // 有关联表单，则跳到报名表单处
      // 关联表单id是cId
      let isGoBack = this.dataInfo.hasPermission == true||this.dataInfo.payType==3|| (this.isMarketing && !this.dataInfo.sales && selectNum == 0)||this.dataInfo.isSaleOnly == 0 ? 1 : 0;
      let pathQuery = {
        cId: cId,
        extId: extId,
        ckFrom: ckFrom,
        isFromInvite: 0,
        pId: pId,
        relType: 2,
        type: 1,
        recRelateId: this.recRelateId,
        recType: this.recType,
        isGoBack: isGoBack,
        bargainId: bargainId,
        courseType: 1
      };
      if (this.goodsRoomId) {
        pathQuery.goodsRoomId = this.goodsRoomId;
      }
      if (selectNum > 0) {  //企业团购
        pathQuery.isGroupPurchase = true;
        pathQuery.groupSelectNum = selectNum;
        pathQuery.groupPurchaseId = this.dataInfo.enterpriseGroup.id;
      }
      this.$routerGo(this, "push", { path: '/homePage/form', query: pathQuery });
    },
    goTOturn() {
      let $this = this
      $this.$routerGo($this, "push", {
        path: "/homePage/marketing/turntable",
        query: {
          taId: $this.dataInfo.joinActivityInfo.activityData.id
        }
      });
    },
    //获取课程详情，如果课程已经下架，那么后台返回空，如果没有课程目录，那么就显示让管理员上传资源
    getVoiceDetail() {
      let $this = this;
      let postUrl = `${global.apiurl}courses/${this.courseId}?extId=${this.extId}&ckFrom=${this.ckFrom}`;
      if (this.accessToken) {
        postUrl = postUrl + '&accessToken=' + this.accessToken;
      }
      if (this.fromColumnId > -1) {
        postUrl = postUrl + '&columnId=' + this.fromColumnId;
      }

      if ((this.isAndroidAudioApp || this.isIosAudioApp) && !(this.isAndroidVideoApp || this.isIosVideoApp)) { //此版本app不支持分页请求
        postUrl = postUrl + '&isAppV1=1';
      }
      if (this.distributionId) {
        postUrl = `${global.apiurl}distributionMarkets/${this.distributionId}/subs/${this.courseId}`;
      }
      if (this.themeId) {
        postUrl = postUrl + `&themeId=${this.themeId}`
      }
      if(this.circleQuery){
        postUrl =`${postUrl}&circleId=${this.circleQuery.circleId}&planId=${this.circleQuery.planId}`;
      }
      // 如果当前存在recRelateId 是属于被推荐人进入
      if (this.recRelateId != '') {
        let recRelateId = this.recRelateId
        let recType = this.recType
        let refereeId = this.$route.query.refereeId
        postUrl = postUrl + `&recRelateId=${recRelateId}&recType=${recType}&refereeId=${refereeId}`
      }
      postUrl = postUrl.includes('?') ? (postUrl + '&isSkeleton=1') : (postUrl + '?isSkeleton=1');
      postUrl = this.cfg && this.cfg.enableColumnOrderType == 2 ? (postUrl + '&sortInColumn=desc') : (postUrl + '&sortInColumn=asc');
      if(this.ttId && this.ttId > 0){
        postUrl = postUrl + '&ttId='+ this.ttId + '&tpId='+ this.tpId + '&tlId='+ this.tlId;
      }
      utilJs.getMethod(postUrl, function (res) {
        if (
          res == null ||
          res == "" ||
          res.status == -1 ||
          (res.status != 0 && res.status != 1 && res.status != 2 && res.status != 3 && res.hasPermission == false) ||
          (res.status != 0 && res.status != 1 && res.status != 2 && res.status != 3 && res.payType == 1 && (!$this.accessToken)) ||
          res.courseType != 1 ||
          (res.isSaleOnly == 0 && res.isSaleTogether == 0)
        ) {
          let info = res.status == -1 ? "删除" : "下架";
          info = "该课程已" + info + "，请联系管理员！";
          if (res.courseType != 1) {
            info = "此课程不属于音频课程，请通过课程名称进行搜索课程！";
          }
          if (res.isSaleOnly == 0 && res.isSaleTogether == 0) {
            info = '此课程无法购买，请联系商家！';
          }
          $this.$routerGo($this, "replace", {
            path: "/error/emptyPage",
            query: { from: "", info: info }
          });
        } else {
          setDocumentTitle(res.name.length > 13 ? (res.name.substring(0, 13) + '...') : res.name);
          if ($this.distributionId) {
            if (res.items) {
              for (let i of res.items) {
                if (i.mp3Url) {
                  i.mp3UrlDecrypt = decrypt(i.mp3Url);
                  i.mp3Url = i.mp3UrlDecrypt;
                }
                if (i.audioUrl) {
                  i.audioUrlDecrypt = decrypt(i.audioUrl);
                  i.audioUrl = i.audioUrlDecrypt;
                }
                if (i.m3u8Url) {
                  i.m3u8UrlDecrypt = decrypt(i.m3u8Url);
                  i.m3u8Url = i.m3u8UrlDecrypt;
                }
              }
            }
            res.dirCount = res.items.length;
          }
          if (!$this.distributionId && res.recommend.isExist == 0) {
            $this.recRelateId = '';
          }
          // if (res.items != null && res.dirCount > 0) {
            //已下架
            if (((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || (res.vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19))))))) && (res.status == 2 || res.status == 0)) {
              $this.isOffSale = true;
              $this.$store.commit("updateHasNoticeText", true);
            }
            //判断课程指定日期过期是否已经过期
            if (res.isValid == 2 && (res.permissionType == 0 || res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) {
              $this.hasExpired = utilJs.getTimeByDate(res.validAt) - (new Date()).getTime() < 0;
              if ($this.hasExpired) {
                $this.$store.commit("updateHasNoticeText", true);
              }
            }
            //定时上架
            if (res.status == 3 && ((!res.hasPermission) || (res.hasPermission && (res.payType != 2 || (res.vipType > 1 && ((res.vipDiscount == 0 && (res.permissionType == 2 || res.permissionType == 3 || res.permissionType == 19)) || (res.svipDiscount == 0 && (res.permissionType == 3 || res.permissionType == 19)))))))) {
              $this.timingPutOn = true;
              $this.$store.commit("updateHasNoticeText", true);
            }
            var rewardPoints = sessionStorage.getItem(
              $this.courseId + "rewardPoints"
            ) || 0;
            if (rewardPoints > 0) {
              $this.showPoints = true;
              $this.rewardPoints = rewardPoints;
            }
            res.deductiblePoints = res.deductibleAmount; // 兼容字段
            $this.dataInfo = res;
            // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
            $this.optimal = res.optimal || null;
            if ($this.dataInfo.isCopy > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
              $this.cfg.isCopy = $this.dataInfo.isCopy;
            }
            if ($this.dataInfo.isCopyPicture > -1) { //-1：使用全局变量 1：允许复制 0：禁止复制
              $this.cfg.isCopyPicture = $this.dataInfo.isCopyPicture;
            }
            $this.isCollect = $this.dataInfo.isCollect ? $this.dataInfo.isCollect : false;
            $this.isIosAudioApp = utilJs.isIosAudioApp() && $this.dataInfo.hasPermission; //试听暂时先走网页流程，带app同事改好后再走原生
            $this.isAndroidAudioApp = utilJs.isAndroidAudioApp() && $this.dataInfo.hasPermission; //
            if ($this.dataInfo.payType == 3) {
              $this.dataInfo.allowWholeWatch = 0;
              $this.dataInfo.watchPermission = 0;
              $this.dataInfo.watchTime = 0;
              $this.dataInfo.watchTimeSeconds = 0;
            }
            if (!$this.dataInfo.hasPermission && $this.dataInfo.previewLabel) {
              $this.$set($this.tabList[1], "smallText", '试学');
            }
            if ($this.dataInfo.hasPermission && $this.dataInfo.permissionType == 42) {
              $this.dataInfo.giftRelates = null;
            }
            // 是否显示评论tab
            if (($this.dataInfo.enableComment == 1 && !$this.distributionId) || ($this.dataInfo.enableComment == 2 && $this.cfg && $this.cfg.enableComment == 1 && !$this.distributionId && $this.cfg.enableAudioComment == 1)) {
              $this.tabList.push({
                title: '评论',
                index: 2,
                smallNum: 0
              })
            }
            $this.tabList.push({
              title: '推荐',
              index: 4,
            })
            // $this.qrImg = res.courseQrcode;
            if ($this.dataInfo.joinActivityInfo && $this.dataInfo.joinActivityInfo.isShowDialog == 1) {
              $this.$cjConfirm({
                title: '', //
                titleCenter: true, //标题是否居中
                message: '恭喜！您获得了大转盘抽奖机会！',
                messageCenter: true, //内容是否居中
                showMasker: true, //是否显示透明背景
                clickCloseModal: false, //是否点击透明背景关闭弹窗
                showCancelButton: true, //是否显示取消按钮
                cancelButtonText: '稍后再说', //取消按钮文本
                confirmButtonText: '立刻前往', //确认按钮文本
                onConfirm() {
                  $this.$routerGo($this, "push", {
                    path: "/homePage/marketing/turntable",
                    query: {
                      taId: $this.dataInfo.joinActivityInfo.activityData.id
                    }
                  });
                }
              })
            }
            $this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
            $this.pointsOnBuyingAudio =
              localStorage.getItem("pointsOnBuyingAudio") || 0;
            // $this.isSelectedVoice = false; //(isFromPathColumn && ($this.$route.query.goIndex || $this.$route.query.goIndex == 0) && $this.dataInfo.hasPermission) ? true : false;
            $this.extColumnId = res.extColumnId;
            $this.learningPosition = $this.dataInfo.hasPermission ? (res.learningPosition ? (res.learningPosition.innerIndex >= res.dirCount ? (res.dirCount - 1) : res.learningPosition.innerIndex) : null) : null;
            $this.firstPosition = $this.learningPosition == null || $this.$route.query.goIndex || Number($this.$route.query.goIndex) == 0 ? false : true;																			  
            // $this.learningPosition ? $this.currentIndex = $this.learningPosition : "";
            let noNeedGetList = false;
            // let fromColumnCourseId = sessionStorage.getItem('fromColumnCourse') || 0;
            // if ($this.dataInfo.hasPermission && fromColumnCourseId && Number($this.fromColumnId) != -1 && Number(fromColumnCourseId) == Number($this.fromColumnId)) {
            //    $this.isSelectedVoice = true;
            //    sessionStorage.removeItem('fromColumnCourse');
            // }
            if ($this.cfg && $this.cfg.audioAutoPlay == 1 && isFromPrevEnd && $this.dataInfo.hasPermission && Number($this.fromColumnId) != -1) {
              isFromPrevEnd = false;
              $this.isSelectedVoice = true;
              // sessionStorage.removeItem('fromColumnCourse');
              $this.learningPositionTmp = 0;
              $this.currentIndex = 0;
              $this.learningPosition = 0;
              $this.courseListPage = 1;
              $this.courseListPagePrev = 1;
              $this.firstPosition = false;
            } else if ($this.$route.query.goIndex && Number($this.$route.query.goIndex) < $this.dataInfo.dirCount && ($this.learningPosition || $this.learningPosition == 0) && (Number($this.$route.query.goIndex) != $this.learningPosition)) {
            // if ($this.$route.query.goIndex && Number($this.$route.query.goIndex) < $this.dataInfo.dirCount && ($this.learningPosition || $this.learningPosition == 0) && (Number($this.$route.query.goIndex) != $this.learningPosition)) {
              noNeedGetList = true;
              let p1 = $this.getSingleCourse(Number($this.$route.query.goIndex) + 1);
              let p2 = $this.getSingleCourse($this.learningPosition + 1);
              Promise.all([p1, p2]).then((result) => {
                $this.goIndexName = result[0][0].audioName;
                $this.learningPositionName = result[1][0].audioName;
                $this.showChoosePlayIndex = true;
              }).catch((error) => {
                $this.learningPosition = null;
                $this.firstPosition = false;																			  
                $this.currentIndex = 0;
              })
            } else if ($this.$route.query.goIndex && Number($this.$route.query.goIndex) < $this.dataInfo.dirCount) {
              $this.learningPositionTmp = Number($this.$route.query.goIndex);
              $this.currentIndex = Number($this.$route.query.goIndex) % 10;
              $this.learningPosition = Number($this.$route.query.goIndex) % 10;
              $this.courseListPage = (Math.floor($this.learningPositionTmp / 10) + 1);
              $this.courseListPagePrev = (Math.floor($this.learningPositionTmp / 10) + 1);
              $this.firstPosition = false;
            } else if ($this.learningPosition) {
              $this.learningPositionTmp = $this.learningPosition;
              $this.currentIndex = $this.learningPosition % 10;
              $this.learningPosition = $this.learningPosition % 10;
              $this.courseListPage = (Math.floor($this.learningPositionTmp / 10) + 1);
              $this.courseListPagePrev = (Math.floor($this.learningPositionTmp / 10) + 1);
            } else if ($this.learningPosition) {
              $this.currentIndex = $this.learningPosition;
            }
            if ($this.extColumnId) {
              if (res.columnLessons && JSON.stringify(res.columnLessons.next) != '[]') {
                $this.nextLessons = res.columnLessons.next;
              }
              if (res.columnLessons && JSON.stringify(res.columnLessons.prev) != '[]') {
                $this.prevLessons = res.columnLessons.prev;
              }
              if (res.columnLessons && res.columnLessons.cur && JSON.stringify(res.columnLessons.cur) == '[]') {
                $this.fromColumnId = -1;
              }
              // 专栏下的课程索引  如果页面链接以携带参数则不改变，没有的话获取专栏下对应的cur的index
              $this.columnCourseIndex = $this.$route.query.courseIndex ? $this.$route.query.courseIndex : (res.columnLessons && res.columnLessons.cur && res.columnLessons.cur.index ? res.columnLessons.cur.index : $this.columnCourseIndex);
            }
            if ($this.fromColumnId != -1 && !localStorage.getItem('showFirstScrollTag')) {
              $this.showFirstScroll = true;
              localStorage.setItem('showFirstScrollTag', true);
            }
            $this.typeBar = res.tabsType == 4
                              ? (($this.cfg.enableCourseShowType == 2 || ($this.cfg.enableCourseShowType == 1 && !res.hasPermission)) && ($this.$route.query.wFrom != 'learnCenter') ? 0 : 1)
                              : ((res.tabsType == 1 || (res.tabsType == 3 && !res.hasPermission)) && ($this.$route.query.wFrom != 'learnCenter') ? 0 : 1);
            // 关联配套打卡
            $this.relatedList = res.signColumns ? res.signColumns : [];
            // if ($this.relatedList && $this.relatedList.length > 0 && res.hasPermission) {
            //   $this.tabList.splice(2, 0, {
            //   title: '搭配学习',
            //   index: 3,
            // })}
            // if ($this.dataInfo.dirCount && $this.dataInfo.dirCount != '' && $this.dataInfo.dirCount != null) {
            //   $this.tabList[1].title = '目录•' + $this.dataInfo.dirCount
            // }
            $this.getRelatedList();
            $this.initShowMore();
            $this.showFormText = res.collectPage != 3 && res.permissionType != 42 &&res.hasPermission == true && res.isRelForm == true && res.hasFormLog == false && localStorage.getItem("showForm") == 1 ? true : false;
            if (!res.hasPermission) {
              $this.playType = 0;
            } else if ($this.cfg.playSetting == 3 && res.dirCount == 1 && $this.fromColumnId == -1 && !$this.ttId) {
              $this.playType = 0;
            } else {
              $this.playType = $this.cfg.playSetting == 3 ? 1 : $this.cfg.playSetting == 2 ? 2 : 0;
            }
            if (!$this.distributionId && ($this.isAndroidAudioApp || $this.isIosAudioApp)  && !($this.isAndroidVideoApp || $this.isIosVideoApp)) {
              if (!window.CryptoJS) {
                $this.$showCjToast({
                  text: '资源正在处理中，请稍后重试...',
                  type: 'text'
                });
                return;
              }
              for (let i of $this.dataInfo.items) {
                if (i.mp3Url) {
                  i.mp3UrlDecrypt = decrypt(i.mp3Url);
                  i.mp3Url = i.mp3UrlDecrypt;
                }
                if (i.audioUrl) {
                  i.audioUrlDecrypt = decrypt(i.audioUrl);
                  i.audioUrl = i.audioUrlDecrypt;
                }
                if (i.m3u8Url) {
                  i.m3u8UrlDecrypt = decrypt(i.m3u8Url);
                  i.m3u8Url = i.m3u8UrlDecrypt;
                }
              }
              $this.setAppAudioInfo();
            }
            $this.$nextTick(function () {
              if (!$this.dataInfo.hasPermission && !$this.distributionId) {
                $this.getProdRelateCollocation();
              }
              if (!$this.distributionId) {
                $this.$refs.descriptions.getDescptionDetail();
              }
              if ($this.firstPosition == false && ($this.$route.query.goIndex || $this.$route.query.goIndex == 0) && $this.dataInfo.hasPermission && ($this.distributionId || (($this.isAndroidAudioApp || $this.isIosAudioApp) && !($this.isAndroidVideoApp || $this.isIosVideoApp)))) {
                let goIndex = $this.dataInfo.hasPermission ? ($this.$route.query.goIndex || 0) : 0;
                $this.currentIndex = Number(goIndex);
                $this.learningPosition = Number(goIndex);
                $this.seeVoice($this.currentIndex, 1);
              } else if ($this.distributionId || (($this.isAndroidAudioApp || $this.isIosAudioApp) && !($this.isAndroidVideoApp || $this.isIosVideoApp))) {
                if ($this.learningPosition != null && $this.firstPosition == true) {
                  $this.seeVoice($this.learningPosition, 1);
                } else {
                  $this.seeVoice(0, 1);
                }
              }
            });

            // 拼团
            if (res.collage != null && $this.companyAuth.enableCollage == 1) {
              let nt = new Date().getTime();
              let st = utilJs.getTimeByDate(res.collage.startTime);
              let et = utilJs.getTimeByDate(res.collage.endTime);
              if (nt >= st && nt < et && res.collage.status < 3) {
                $this.extId = res.columnId == 0 ? -1 : res.columnId;
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.collageCourse
                    : global.ckFrom.collageColumn;
                res.collage.status = 2;
              } else if (nt < st && res.collage.status == 1) {
                $this.extId = res.columnId == 0 ? -1 : res.columnId;
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.collageCourse
                    : global.ckFrom.collageColumn;
                res.collage.status = 1;
              } else if (nt >= et && res.collage.status == 2) {
                res.collage.status = 3;
                res.collage = null;
                $this.extId = -1;
                $this.ckFrom = global.ckFrom.course;
              } else {
                $this.dataInfo.collage = null;
                $this.extId = -1;
                $this.ckFrom = global.ckFrom.course;
              }
            } else if (
              res.sales != null &&
              (res.sales.limit == 0 || res.sales.balance > 0) &&
              res.sales.status &&
              $this.companyAuth.enableFlashSalesModule == 1
            ) {
              // 限时购
              $this.extId = res.columnId == 0 ? -1 : res.columnId;
              let nt = new Date().getTime();
              let st = utilJs.getTimeByDate(res.sales.sales.startTime);
              let et = utilJs.getTimeByDate(res.sales.sales.endTime);
              if (nt >= st && nt < et && res.sales.sales.status > -1) {
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.flashSalesCourse
                    : global.ckFrom.flashSalesColumn;
                res.sales.sales.status = 2;
              } else if (nt < st && res.sales.sales.status == 1) {
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.course
                    : global.ckFrom.column; //未开始支付还是走原价支付流程
                res.sales.sales.status = 1;
                // $this.dataInfo.sales = null;
              } else if (nt >= et && res.sales.sales.status == 2) {
                res.sales.sales.status = -1;
                res.sales = null;
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.course
                    : global.ckFrom.column;
              } else {
                res.sales.sales.status = -1;
                $this.dataInfo.sales = null;
                $this.ckFrom =
                  res.columnId == 0
                    ? global.ckFrom.course
                    : global.ckFrom.column;
              }
            } else if (res.isFriendHelper) { //友情灌溉
              // let stime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faStartAt) : 0;
              // let etime = $this.dataInfo ? utilJs.getTimeByDate($this.dataInfo.faEndAt) : 0;
              // let nowTime = (new Date()).getTime();
              // //faStatus 1未开始,2进行中,3已结束,4已停止
              // if (stime > nowTime) {
              //   $this.faStatus = 1;
              // } else if (etime > nowTime) {
              //   $this.faStatus = 2;
              // }
              $this.ckFrom = res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            } else {
              $this.dataInfo.collage = null;
              $this.dataInfo.sales = null;
              $this.extId = res.columnId == 0 ? -1 : res.columnId;
              $this.ckFrom =
                res.columnId == 0 ? global.ckFrom.course : global.ckFrom.column;
            }
            //重置底部菜单的字段
            $this.dataInfo.showFriendHelper = !$this.dataInfo.hasPermission && !$this.distributionId && $this.companyAuth.enableFriendHelper == 1 && $this.dataInfo.isFriendHelper && $this.ckFrom == $this.cfrom.course && $this.dataInfo.collage == null; //是否友情灌溉购买
            $this.dataInfo.showBuyButton = !$this.dataInfo.hasPermission; //是否显示购买按钮（true则要替换为立即体验，代表没权限进入）
            $this.dataInfo.showPresentFriend = $this.cfg.enableSales == 1 && !$this.isiOS && !$this.distributionId && $this.dataInfo.payType == 2 && $this.dataInfo.isSaleOnly == 1 && $this.dataInfo.isUserGroup != 1; //是否显示赠送好友
            $this.dataInfo.showMarketingCard = $this.dataInfo.isFriendHelper || $this.dataInfo.collage || $this.dataInfo.sales || $this.dataInfo.bargain; //是否显示活动海报
            $this.dataInfo.showInvitionCard = !$this.distributionId && $this.dataInfo.isInvitionCard == 1 && !$this.dataInfo.isFriendHelper && $this.dataInfo.collage == null && $this.dataInfo.sales == null && $this.dataInfo.bargain == null && ($this.dataInfo.recommend.isExist == 0); //是否显示邀请好友

            // if ($this.dataInfo.isSaleOnly == 0) { //非单卖则获取相关联的知识套餐和专栏
              $this.getBelong(1);
            // }
            if (!res.hasPermission) {
              $this.getCouponList();
            }
            //app原生音频这一版本不作分页请求
            if (!$this.distributionId
            && !noNeedGetList
            && !(($this.isAndroidAudioApp || $this.isIosAudioApp) && !($this.isAndroidVideoApp || $this.isIosVideoApp))) {
              $this.getCourseList();
            } else if ($this.distributionId) {
              $this.checkWholePlayPermission();
              $this.checkAuditionPermission();
              $this.getDetailHtml($this.currentIndex);
            }
            if ($this.dataInfo.enterpriseGroup && $this.dataInfo.payType == 2) {
              let gpInfo = {
                cover: $this.dataInfo.enterpriseGroup.image ? $this.dataInfo.enterpriseGroup.image : $this.dataInfo.courseAvatar,
                title: $this.dataInfo.enterpriseGroup.name ? $this.dataInfo.enterpriseGroup.name : $this.dataInfo.name,
                coursePrice: $this.dataInfo.price,
                ladders: $this.dataInfo.enterpriseGroup.ladder,
                isValid: $this.dataInfo.isValid,
                validTime: $this.dataInfo.validTime,
                validAt: $this.dataInfo.validAt,
                defultBuyNum: $this.dataInfo.enterpriseGroup.ladder[0].minBuyNumber,
                hasGift: $this.dataInfo.giftRelates && $this.dataInfo.giftRelates.length > 0 ? true : false
              }
              $this.$nextTick(() => {
                $this.$refs.gpModal.initData(gpInfo);
              })
            }
            $this.watchRecord();
            if (noNeedGetList) { //如果不需要用户选择课时，则获取列表后再配置分享内容
              $this.wechatShare();
            }
            $this.getCommentStatus();
            $this.$nextTick(function () {
              window.addEventListener("scroll", $this.handleScroll);
              if (document.getElementById('scrollCourse')) {
                document.getElementById('scrollCourse').addEventListener("scroll", $this.handleScroll);
              }
              // setTimeout(() => {
              //   $this.titleBarTop = $this.$refs.titleBar.offsetTop;
              //   $this.titleBarHeight = $this.$refs.titleBar.offsetHeight;
              //   $this.bodyClientHeight = document.body.clientHeight;
              // }, 400)
            });
            // if ($this.typeBar == 1 && document.getElementById('scrollCourse')) { //课程目录滚动到当前播放的音频
            //   $this.$nextTick(function () {
            //     if (!($this.cfg && $this.cfg.dirType == 2)) {
            //       document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[$this.learningPosition] ? document.getElementById('scrollCourse').childNodes[$this.learningPosition].offsetLeft - 10 : 0;
            //     }
            //   });
            // }
            $this.$nextTick(function () {
              let inactive = document.getElementsByClassName(
                "aplayer-icon-mode"
              );
              if (inactive != null && inactive.length > 0) {
                for (let i = 0; i < inactive.length; i++) {
                  inactive[i].style.display = "none";
                }
              }
              //分销商城不请求关联
              if (
                !$this.distributionId &&
                $this.ckFrom != global.ckFrom.column
              ) {
                let that = $this;
                utilJs.postMethod(
                  global.apiurl + "common/relevance",
                  { objId: $this.courseId, ckFrom: $this.ckFrom == $this.cfrom.flashSalesCourse ? 5 : $this.ckFrom },
                  function (res) {
                    that.relationData = res;
                  }
                );
              }
            });
          // } else {
          //   $this.$routerGo($this, "replace", {
          //     path: "/error/emptyPage",
          //     query: {
          //       from: "course",
          //       info: "亲爱的学员您好，老师正在整理课程，请耐心等待"
          //     }
          //   });
          // }
        }
        if (res.sales && res.sales.sales) {
          $this.isSalesBegin = (res.sales.sales.startTime).replace(/\s+|[-]|[:]/g, "") <= (utilJs.getNowTime()).replace(/\s+|[-]|[:]/g, "") ? true : false;
        }
        $this.columnPermission = res.columnPermission || false;
        $this.ltAnswerId = res.ltAnswerId;
        $this.ltAnswerStatus = res.ltAnswerStatus;
        $this.isAnswererSelf = res.isAnswererSelf;

        const guideData = $this.dataInfo.guideData || null;
        const showPosition = guideData && (guideData.showPosition == 3 || (guideData.showPosition == 1 && (!$this.dataInfo.hasPermission || ($this.dataInfo.payType == 1 && $this.dataInfo.isSaleOnly != 0))) || (guideData.showPosition == 2 && $this.dataInfo.hasPermission))
        if($this.$refs.guidance && guideData && guideData.isOpenGuide == 1 && guideData.guideType.includes(3) && showPosition){
          utilJs.getLeadSocialLog($this.cfrom.course, $this.courseId).then(dataRes => {
            if (!dataRes || dataRes == '') {
              $this.$refs.guidance.isShowPop();
              utilJs.saveLeadSocialLog($this.cfrom.course, $this.courseId)
            }
          })
        }
      });
    },
    //跳转到所属专栏
    goColumn() {
      let queryT = { cId: -1, ckFrom: global.ckFrom.column, extId: this.fromColumnId, distribution: this.distributionId, fromBackColumn: true }
      if (this.learningPosition || this.learningPosition == 0) {
        queryT.classIndex = this.currentIndex;
      }
      queryT.columnCourseIndex = this.columnCourseIndex;
      this.$routerGo(this, "push", {
        path: "/homePage/column/columnDetail",
        query: queryT
      });
    },
    goColumnCourse(lessons, index) {
      let courseId = lessons.courseId || '';
      let courseType = lessons.courseType || '';
      let liveId = lessons.liveId || '';
      let datumId = lessons.datumId || '';
      if (!lessons) {
        return;
      }
      let t = Number(courseType);
      let query = {
        courseId: courseId,
        extId: this.extColumnId,
        ckFrom: global.ckFrom.course,
        distributionId: this.distributionId
      }
      if (index != null) query.courseIndex = index
      switch (t) {
        case 0:
          if (this.dataInfo.hasPermission && this.cfg && this.cfg.mediaAutoPlay == 1) {
            sessionStorage.setItem('fromColumnCourse', this.extColumnId)
          }
          this.$routerGo(this, "push", {
            path: "/homePage/course/video",
            query: query
          });
          break;
        case 1:
          // if (this.cfg && this.cfg.mediaAutoPlay == 1 && this.dataInfo.hasPermission && (lessons.m3u8Url || lessons.mp3Url || lessons.audioUrl)) {
          //   this.audioMp3Src = lessons.mp3Url || lessons.audioUrl;
          //   this.audioM3u8Src = lessons.m3u8Url
          //   sessionStorage.setItem('fromColumnCourse', this.extColumnId)
          //   setTimeout(() => {
          //     this.$routerGo(this, "push", {
          //       path: "/homePage/course/voice",
          //       query: query
          //     });
          //   }, 1500);
          // } else {
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: query
          });
          // }
          break;
        case 2:
          this.$routerGo(this, "push", {
            path: "/homePage/course/imgText",
            query: query
          });
          break;
        case 8: 
          this.$routerGo(this, "push", {
            path: "/homePage/datum/datumDetail",
            query: { datumId: datumId, fromColumnId: this.fromColumnId }
          });
          break;
        case 51:
          this.$routerGo(this, "push", {
            path: "/homePage/live/liveDetail",
            query: {
              liveId: liveId
            }
          });
          break;
        case 180:
          this.$routerGo(this, "push", {
            path: "/homePage/live/livePersonalDetail",
            query: {
              liveId: liveId
            }
          });
          break;
      }
    },
    clickClassItem(e) {
      let columnDetail = e.item;
      let index = e.index;
      let sIndex = e.sIndex;
      // 非微信 && 非移动端 不让观看
      if (utilJs.isOpenPcGuard()) {
        this.$refs.notSupportPlay.public_openNoSupport();
        return;
      }
      if (columnDetail.prodType == 110) {
        if (this.dataInfo.hasPermission && this.cfg && this.cfg.mediaAutoPlay == 1) {
          sessionStorage.setItem('fromColumnCourse', this.extColumnId)
        }
        this.$routerGo(this, "push", {
          path: "/homePage/course/video",
          query: {
            courseId: columnDetail.courseId,
            extId: this.extColumnId,
            ckFrom: this.ckFrom,
            goIndex: sIndex,
            courseIndex: index,
            distributionId: this.distribution ? this.extId : '',
          }
        });
        return
      } else if (columnDetail.prodType == 111) {
        //音频
        if (columnDetail.courseId == this.courseId) {
          if (this.courseListPagePrev != Math.ceil(columnDetail.assets.items.length / 10)) {
            this.$set(this.dataInfo, 'items', columnDetail.assets.items);
            this.is_courseListPage = false;
            this.is_courseListPagePrev = false;
            this.courseListPagePrev = Math.ceil(columnDetail.assets.items.length / 10);
          }
          this.currentIndex = sIndex;
          this.learningPosition = sIndex;
          setTimeout(() => {
            if (this.typeBar == 1 && document.getElementById('scrollCourse')) { //课程目录滚动到当前播放的音频
              this.$nextTick(function () {
                document.getElementById('scrollCourse').scrollLeft = document.getElementById('scrollCourse').childNodes[this.currentIndex] && (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) > 0 ? (document.getElementById('scrollCourse').childNodes[this.currentIndex].offsetLeft - (document.getElementById('scrollCourse').childNodes[this.currentIndex].clientWidth/2)) : 5;
              });
            }
            if (this.typeBar == 1 && document.getElementById('scrollCourseVtr') && document.getElementById('scrollCourseVtr').childNodes[this.currentIndex] && this.styleType == 1) {
              this.$nextTick(() => {
                document.documentElement.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
                document.body.scrollTop = document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40 > 0 ? (document.getElementById('scrollCourseVtr').childNodes[this.currentIndex].offsetTop - 40) : 5;
              });
            }
          this.seeVoice(sIndex);
          }, 300);
        } else {
          this.$routerGo(this, "push", {
            path: "/homePage/course/voice",
            query: {
              courseId: columnDetail.courseId,
              extId: this.extColumnId,
              ckFrom: this.ckFrom,
              goIndex: sIndex,
              courseIndex: index,
              distributionId: this.distribution ? this.extId : '',
            }
          });
        }
        return
      }
    },
    getCommentStatus() {
      this.commentStatus = 0;
      if (this.dataInfo.enableComment == 1 || (this.dataInfo.enableComment == 2 && this.cfg && this.cfg.enableComment == 1 && this.cfg.enableAudioComment == 1)) {
        this.commentStatus = 1;
        this.$nextTick(() => {
          this.$refs.commentCom && this.$refs.commentCom.public_initData()
        })
      }
    },
    //播放当前音频课程
    seeVoice(index, isFirst = 0, playedEnd = 0) {
      const oldIndex = index
      //非微信 && 非移动端 不让观看
      if (utilJs.isOpenPcGuard()) {
        this.$refs.notSupportPlay.public_openNoSupport();
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind && isFirst != 1) {
        if(utilJs.goBindMobile({
            cId: this.courseId,
            extId: this.extId,
            ckFrom: this.ckFrom,
            isFromInvite: 0,
            isGoPay: false
        })) return;
      }
      // 训练营进入课程，不需要填表单
      if (!(this.campButtonStatus && this.campButtonStatus.campPermission) && this.dataInfo.hasPermission && this.dataInfo.permissionType != 42 && this.formflag && isFirst!=1) {
        this.goForm();
        return
      }
      if ((this.isOffSale || this.hasExpired || this.timingPutOn || this.isUserGroup || this.isStoreUserGroup) && isFirst != 1) {
        let noticeText = this.getNoticeText();
        this.$showCjToast({
          text: noticeText,
          type: 'text'
        });
        return
      }
      //免费课程并且需要关注后才能观看
      // if (this.dataInfo.payType == 1 && this.cfg && this.cfg.enableSubscribeWechat == 1) {
      //   this.freeWatch = true;
      //   return;
      // }
      if (utilJs.isWeiXin() && isFirst != 1 && this.$store.state.oem_store.isFirstPlayAudio && this.dataInfo.hasPermission) { //首次播放给与提示：必须点击播放按钮才能进行播放
        this.$showCjToast({
          text: "微信出于安全考虑，首次播放必须点击播放器的播放按钮才能进行播放",
          type: 'text',
        });
        this.$store.commit('updateIsFirstPlayAudio', false);
      }
      //如果是超过最后一节，则播放第一节
      if (index >= this.dataInfo.dirCount) {
        index = 0;
      }
      //如果小于第一节，则播放最后一节
      if (index < 0) {
        index = this.dataInfo.dirCount - 1;
      }

      //有权限 | 当前播放第一节并且可以试听并且试听分钟数>0 | 当前播放第一节并行整节可以试听并且总节数>1
      //分销第一节可试听
      if (
        this.dataInfo.items && this.dataInfo.items.length > 0 &&
        (this.dataInfo.hasPermission ||
        (this.dataInfo.items[index].watchPermission == 1 &&
          (this.dataInfo.items[index].watchTime > 0 || this.dataInfo.items[index].watchTimeSeconds > 0) &&
          this.dataInfo.items[index].isPreview == 1) ||
        (this.dataInfo.items[index].allowWholeWatch == 1 &&
          this.dataInfo.items[index].isPreview == 1) ||
        (this.dataInfo.allowWholeWatch == 1 &&
          index == 0 &&
          this.distributionId))
      ) {
        if (this.showCourseList) {
          //如果有选节的弹窗，需要关闭
          this.showCourseList = false;
          this.$nextTick(function () {
            window.scrollTo(0, 0);
          });
        }
        if (!this.dataInfo.hasPermission && index != 0) {
          this.isSelectedVoice = true; //试听也直接播放
        }
        if (this.dataInfo.hasPermission == true && curPlayTime != 0 && (this.currentIndex != index) && startSt != 0) {
          if (curPlayTime > 2 && totalTime != 0) {
            let progress = (playedEnd == 1 ? 1 : Number(curPlayTime / totalTime).toFixed(2));
            this.dataInfo.items[this.currentIndex].curProgressRatio = progress;
            if (Number(this.dataInfo.items[this.currentIndex].curProgressRatio) > Number(this.dataInfo.items[this.currentIndex].progressRatio)) {
              this.dataInfo.items[this.currentIndex].progressRatio = progress;
            }
            endSt = new Date().getTime();
            playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
            this.setProgress(this.dataInfo.items[this.currentIndex].detailId, progress, playedDuration);
            this.isShareInt(playedDuration);
            startSt = 0;
            endSt = 0;
            playedDuration = 0;
            this.dataInfo.items[this.currentIndex].goProcess = false;
          }
        }
        // 关联训练营 && 顺序播放，播放到最后一节时，先不直接重新开始播第一节，先判断是否需要重新获取训练营状态以及能不能自动跳转下一节（主要是闯关、定期的训练营下一节可能有锁）
        if (oldIndex >= this.dataInfo.dirCount && this.playType == 1 && this.campButtonStatus && this.campButtonStatus.campPermission && !this.campButtonStatus.isNextUnlock) {
          return
        }
        this.$nextTick(() => {
          this.appNeedPlayThis = playedEnd != 1 ? 1 : 0;//app播放结束自动播放下一首的时候传0
          this.audioPlayTime = 0;
          curPlayTime = 0;
          this.currentIndex = index;
          this.learningPosition = index;
          //app课时没有分页请求，获取详情数据后就全部解密了（初始化时要把解密后的数据传给后台），播放时不需重新解密
          if (!this.distributionId && !((this.isAndroidAudioApp || this.isIosAudioApp)  && !(this.isAndroidVideoApp || this.isIosVideoApp))) {
            if (!window.CryptoJS) {
              this.$showCjToast({
                text: '资源正在处理中，请稍后重试...',
                type: 'text'
              });
              return;
            }
            if (this.dataInfo.items[index].mp3Url) {
              this.dataInfo.items[index].mp3UrlDecrypt = decrypt(this.dataInfo.items[index].mp3Url);
              this.dataInfo.items[index].mp3Url = null;
            }
            if (this.dataInfo.items[index].audioUrl) {
              this.dataInfo.items[index].audioUrlDecrypt = decrypt(this.dataInfo.items[index].audioUrl);
              this.dataInfo.items[index].audioUrl = null;
            }
            if (this.dataInfo.items[index].m3u8Url) {
              this.dataInfo.items[index].m3u8UrlDecrypt = decrypt(this.dataInfo.items[index].m3u8Url);
              this.dataInfo.items[index].m3u8Url = null;
            }
          }
          this.audioMp3Src = !this.distributionId ? (this.dataInfo.items[index].mp3UrlDecrypt || this.dataInfo.items[index].audioUrlDecrypt) : (this.dataInfo.items[index].mp3Url || this.dataInfo.items[index].audioUrl);
          this.audioM3u8Src = !this.distributionId ? this.dataInfo.items[index].m3u8UrlDecrypt : this.dataInfo.items[index].m3u8Url;
          this.audioTitle = this.dataInfo.items[index].audioName;
          if (((index == this.dataInfo.items.length - 1) || (index == this.dataInfo.items.length - 2)) && this.is_courseListPage && !this.courseListLoading && isFirst != 1 && !this.distributionId && !((this.isAndroidAudioApp || this.isIosAudioApp) && !(this.isAndroidVideoApp || this.isIosVideoApp))) {
            this.getCourseList();
          }
          // if (index != 0) {
          //   this.$refs.audioCom.audioPlay();
          // } 
        });
      } else {
        if (isFirst == 1) {
          return;
        }
        if(this.dataInfo.payType==3){
            this.$showCjToast({
              text: '输入密码后可以收听此课程的所有音频',
              type: 'text'
            });
          }else{
            this.$showCjToast({
              text: '购买后可以收听此课程的所有音频',
              type: 'text',
            });
          }
      }
    },
    //app切后台的时候会导致播放的音频和h5对不上，需要重置h5的播放信息
    appChangePlayIndex(appPlayIndex) {
      this.appNeedPlayThis = 0;//app播放结束自动播放下一首的时候传0
      this.currentIndex = appPlayIndex;
      this.audioMp3Src = this.dataInfo.items[appPlayIndex].mp3UrlDecrypt || this.dataInfo.items[appPlayIndex].audioUrlDecrypt;
      this.audioM3u8Src = this.dataInfo.items[appPlayIndex].m3u8UrlDecrypt;
      this.audioTitle = this.dataInfo.items[appPlayIndex].audioName;
    },
    //点右上角x记录观看时长
    cacheWatchTimeByClose() {
      if (this.dataInfo.hasPermission == true && curPlayTime != 0 && startSt != 0) {
        if (curPlayTime > 2 && totalTime != 0) {
          let progress = Number(curPlayTime / totalTime).toFixed(2);
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          let postUrl = `${global.apiurl}analysis/course/progressLog`;
          let data = {
            prodId: this.dataInfo.items[this.currentIndex].detailId, //视频ID
            progress: progress, //完成进度
            duration: playedDuration > 0 ? playedDuration : 0,
            prodType: 111,
            cId: this.courseId,
            cType: this.distributionId ? 103 : 5,
            isClose: 1,
            encodeCompanyId: localStorage.getItem("companyId") ? localStorage.getItem("companyId") : '',
            encodeUserId: localStorage.getItem("userId") ? localStorage.getItem("userId") : ''
          }
          utilJs.berforeCloseSendData(postUrl, data);
        }
      }
    },
    //分享
    wechatShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.courseAvatar;
      if ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper && this.ckFrom == this.cfrom.course && this.dataInfo.collage == null) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      let shareUrl= '';
      if (this.fromColumnId > -1) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=9&extId=${this.fromColumnId}&refereeId=${localStorage.getItem("userId")}&goIndex=${!this.is_courseListPagePrev ? this.currentIndex : (this.courseListPagePrev * 10 + this.currentIndex)}&courseIndex=${this.columnCourseIndex}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}&goIndex=${!this.is_courseListPagePrev ? this.currentIndex : (this.courseListPagePrev * 10 + this.currentIndex)}`;
      }
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      let $this = this;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () {
        if (!$this.distributionId) {
          if ($this.companyAuth.pointModel == 1) {
            $this.shareGetIntegration($this.courseId, -1, 3, -1);
          } else {
            $this.shareGetIntegration($this.courseId, -1, 56, -1);
          }
        }
      }, '');
    },
    //手机端分享
    appShare: function () {
      let title = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareTitle ? this.dataInfo.shareSetting.shareTitle : this.dataInfo.name;
      let shareImg = this.dataInfo.sales ? this.dataInfo.sales.shareImg : this.dataInfo.shareSetting && this.dataInfo.shareSetting.sharePic ? this.dataInfo.shareSetting.sharePic : this.dataInfo.courseAvatar;
      if ((this.ckFrom == this.cfrom.collageCourse || this.ckFrom == this.cfrom.collageColumn) && this.dataInfo.collage != null && (this.dataInfo.collage.status == 2 || this.dataInfo.collage.status == 1)) {
        title = `【邀您一起拼团】${title}`;
      }
      if (this.dataInfo.sales) {
        title = `【限时抢购】${title}`;
      }
      if (this.dataInfo.bargain != null && ((this.dataInfo.bargain.status == 1 && this.dataInfo.bargain.isPreheat == 1) || this.dataInfo.bargain.status == 2)) {
        title = `【邀您一起砍价】${title}`;
      }
      if (!this.distributionId && this.companyAuth.enableFriendHelper == 1 && this.dataInfo.isFriendHelper && this.ckFrom == this.cfrom.course && this.dataInfo.collage == null) {
        title = `【快来帮我灌溉吧】${title}`;
      }
      let shareUrl= '';
      if (this.fromColumnId > -1) {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=9&extId=${this.fromColumnId}&refereeId=${localStorage.getItem("userId")}&goIndex=${!this.is_courseListPagePrev ? this.currentIndex : (this.courseListPagePrev * 10 + this.currentIndex)}&courseIndex=${this.columnCourseIndex}`;
      } else {
        shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?courseId=${this.courseId}&ckFrom=${this.ckFrom}&extId=${this.extId}&refereeId=${localStorage.getItem("userId")}&goIndex=${!this.is_courseListPagePrev ? this.currentIndex : (this.courseListPagePrev * 10 + this.currentIndex)}`;
      }
      if (this.distributionId) {
        shareUrl = `${shareUrl}&distributionId=${this.distributionId}`;
      }
      let shareDesc = this.dataInfo.shareSetting && this.dataInfo.shareSetting.shareDesc ? this.dataInfo.shareSetting.shareDesc : (this.dataInfo.shareDesc || window.localStorage.getItem("shareDesc") || "点击查看详情");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },

    //分享回调领取积分(只能领取一次)
    shareGetIntegration: function (c, e, p, d) {
      if ((p == 3 && this.companyAuth.enableShareAudioPoint != 1 && this.companyAuth.pointModel == 1) || (p == 56 && this.companyAuth.enableShareCourse != 1 && this.companyAuth.pointModel == 2)) {
        return;
      }
      if ((p == 4 && this.companyAuth.enableListenAudioPoint != 1) || (p == 60 && this.companyAuth.enableWatchListen != 1) || (p == 63 && this.companyAuth.enableTotalWatchCourse != 1)) {
        return;
      }
      if (p == 4 && this.companyAuth.enablePoints == 1) {
        this.dataInfo.enablePoints = 0;
        let $this = this;
        //积分来源 1. 分享视频，2：观看视频，3：分享音频，4：观看音频，14：分享文章
        let data = {
          cId: c,
          extId: e,
          pointFrom: p,
          duration: d
        };
        if (totalTime) {
          data.resourceTotalTime = Math.floor(totalTime / 60);
        }
        utilJs.postMethod(
          global.apiurl + "common/getPoints",
          data,
          function (res) {
            // 成功领取积分后缓存记录当前课程id
            $this.showInt = false;
            let curCourseId = $this.courseId * 1;
            let localIntArr = localStorage.getItem("courseIntArr");
            let intArr = (localIntArr && JSON.parse(localIntArr)) || [];
            if (!(localIntArr && JSON.parse(localIntArr).includes(curCourseId))) {
              intArr.length < 99999 ? intArr.push(curCourseId) : intArr.shift();
              localStorage.setItem("courseIntArr", JSON.stringify(intArr));
            }
            let integrateCount = res.points;
            if (integrateCount > 0) {
              $this.integrateCount = integrateCount;
              $this.showIntegrate = true;
            } else {
              $this.$showCjToast({
                text: "您已领过" + $this.companyAuth.integrateName1,
                type: "text",
              });
            }
          },
          function () { }
        );
      } else {
        let $this = this;
        //积分来源 1. 分享视频，2：观看视频，3：分享音频，4：观看音频，14：分享文章
        let data = {
          cId: c,
          extId: e,
          pointFrom: p,
          duration: d
        };
        utilJs.postMethod(global.apiurl + "common/getPoints", data, function (
          res
        ) {
          let integrateCount = res.points;
          if (integrateCount > 0 && p != 60 && p != 63) {
            $this.integrateCount = integrateCount;
            $this.showIntegrate = true;
          }
        });
      }
    },
    // 获取音频课程小程序葵花码
    getMiniQr: function () {
      let $this = this;
      let postUrl = `${global.apiurl}courses/${this.courseId}/miniCode?prodType=111`;
      if (this.distributionId) {
        postUrl = postUrl + "&isDistribution=1";
      }
      utilJs.getMethod(postUrl, function (res) {
        $this.miniQr = res.miniCode;
      });
    },
    audioPause: function (playStatus) {
      this.playStatus = playStatus;
      if (this.dataInfo.hasPermission == true && curPlayTime != 0 && startSt != 0) {
        if (curPlayTime > 2 && totalTime != 0) {
          let progress = Number(curPlayTime / totalTime).toFixed(2);
          endSt = new Date().getTime();
          playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
          this.dataInfo.items[this.currentIndex].curProgressRatio = progress;
          if (progress <= 0.95 && Number(this.dataInfo.items[this.currentIndex].curProgressRatio) > Number(this.dataInfo.items[this.currentIndex].progressRatio)) {
            this.dataInfo.items[this.currentIndex].progressRatio = progress;
          }
          this.setProgress(this.dataInfo.items[this.currentIndex].detailId, progress, playedDuration, 10);
          this.isShareInt(playedDuration);
          this.isAudioPause = false;
          this.showLearnSign = false;
          this.showLearnSign1 = false;
          this.appNeedPlayThis = 1;//app暂停的时候需要重置这个参数，不然播放的时候会出现逻辑问题
          startSt = 0;
          endSt = 0;
          playedDuration = 0;
        }
      }
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + this.courseId + '&redeemType=37&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = res.data ? $this.couponList.concat(res.data) : [];
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    //领取优惠券
    getCoupon(couponId, cIndex) {
      if (
        localStorage.getItem("enableBindPhoneInRedeemCode") == 1 &&
        !localStorage.getItem("uMobile")
      ) {
        if (utilJs.goBindMobile()) return
      } 
      if (gettingCoupon) {
        return;
      }
      gettingCoupon = true;
      let $this = this;
      utilJs.postMethod(
        global.apiurl + "redeemCodes/collectRedeemCode/" + couponId,
        {},
        function (res) {
          gettingCoupon = false;
          if (res.status == 1) {
            $this.couponList[cIndex].hasReceive++;
            $this.$showCjToast({
              text: '领取成功',
              type: 'success',
            }).then(()=>{
              if ($this.couponList[cIndex].type == 1) {
                  $this.$router.go(0)
                }
            })
          } else {
            $this.$showCjToast({
              text: res.detail,
              type: 'text'
            });
          }
        }
      );
    },
    goCenterProduct(tItem) {
      let type = tItem.prodType;
      if (type == 1 || type == 23 && tItem.vipInfo) {
        if (tItem.vipInfo.isCollage == 1) {
          this.$routerGo(this, "push", {
            path: "/homePage/collage/vipCollage",
            query: {
              prodId: tItem.vipInfo.id,
              isCollage: true
            }
          });
        } else {
          this.$routerGo(this, "push", {
            path: "/member/vip/vipDetail",
            query: {
              type: tItem.prodType,
              fromCmpId: tItem.vipInfo.id
            }
          })
        }
        //  else if (tItem.vipInfo.isMarketing == 1) {
        //   this.$routerGo(this, "push", {
        //     path: "/member/vip/vipBuy",
        //     query: {
        //       prodId: tItem.vipInfo.id,
        //       pId: tItem.vipInfo.marketID,
        //       type: type == 1 ? this.cfrom.flashSalesVip : this.cfrom.flashSalesSvip
        //     }
        //   })
        // } else {
        //   this.$routerGo(this, "push", {
        //     path: "/member/vip/vipBuy",
        //     query: {
        //       prodId: tItem.vipInfo.id,
        //       type: type == 1 ? this.cfrom.vip : this.cfrom.svip
        //     }
        //   })
        // }
        return;
      }
      let query = {}
      let prodId = type == 78 ? tItem.subId : tItem.id;
      if (type == 76) {
        query.relType = tItem.type;
        query.type = 2;
      }
      goDetails(this, type, prodId, query, tItem.courseType);
    },
    //作为分享页被推荐人进入
    isRecommendPage() {
      let recRelateId = this.recRelateId; //推荐人ID
      let recType = this.recType; //推荐类型 1 访问 2 绑定 3 支付
      let bindPhone = this.$route.query.bindPhone; //完成推荐绑定手机号
      let data = { relateId: recRelateId };
      if (recRelateId) {
        if (recType == 1) {
          this.$nextTick(() => {
            this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
          })
        } else if (recType == 2) {
          if (bindPhone) {
            data.mobile = localStorage.getItem("uMobile");
            this.$nextTick(() => {
              this.$refs.recommendPresent.completetRecommendTask(data); // 调用子组件方法
            })
          } else if (!localStorage.getItem("uMobile")) {
            utilJs.goBindMobile({
                recRelateId: recRelateId,
                recType: recType,
                goVoice: 1,
                courseId: this.courseId,
                extId: this.extId,
                ckFrom: this.ckFrom
            });
          } else {
            this.$cjConfirm({
              title: '领取失败',
              message: '您已绑定过手机号，不在推荐范围，无法领取奖励',
              showCancelButton: false,
            })
          }
        }
      }
    },
    // 提问
    goAskQuestion() {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/questionDetail",
        query: {
          answerId: this.ltAnswerId,
          courseId: this.courseId,
          src: 3,
        }
      })
    },
    initData(changeCourse=true) {
      if (changeCourse) {
        isFromPrevEnd = false;
        this.isiOS =
        navigator.userAgent.indexOf("IOSLogin") > -1 || navigator.userAgent.indexOf("IOSNewLogin") > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1;
        this.campButtonStatus = {};
        this.ttId = this.$route.query.ttId || '';
        this.tpId = this.$route.query.tpId || '';
        this.tlId = this.$route.query.tlId || '';
        this.themeId = this.$route.query.themeId || '';
        this.circleQuery = {
        circleId: this.$route.query.circleId || '',
        planId:this.$route.query.circlePlanId || ''
        };
        this.goodsRoomId = this.$route.query.goodsRoomId || '';
        this.extId = this.$route.query.extId || -1;
        this.ckFrom = this.$route.query.ckFrom;
        this.courseId = this.$route.query.courseId;
        this.accessToken = this.$route.query.accessToken;
        this.distributionId = this.$route.query.distributionId || "";
        this.fromColumnId = this.$route.query.extId ? this.$route.query.extId : -1;
        this.count = 0;
        this.interval = null;
        this.dataInfo = "";
        this.relationData = "";
        this.hasShowMore = false;
        this.showAllContent = false;
        this.audioMp3Src = "";
        this.audioM3u8Src = "";
        this.isCourseChange = true;
        this.cloroRGB = THEME_RGB_MAP[this.themeColor];
        this.familyCardData = [];
        this.integral = 0;
        this.checkText = '';
        this.isIosAudioApp = utilJs.isIosAudioApp();
        this.isAndroidAudioApp = utilJs.isAndroidAudioApp();
        this.isIosVideoApp = utilJs.getAppVersion() >= 3 ? true : false;
        this.isAndroidVideoApp = utilJs.getAppVersion() >= 3 ? true : false;
        if (this.fromColumnId != -1) {
          this.columnCourseIndex = this.$route.query.courseIndex ? this.$route.query.courseIndex : 0;
        }
        getBindPhoneSetting(this.distributionId ? 1003 : 111).then(res => {
          this.bindPhoneSetting = res;
        });
      } else {
        isFromPrevEnd = true;
        this.extId = this.extColumnId || -1;
        this.ckFrom = global.ckFrom.course;
        this.courseId = this.nextLessons.item.courseId || ''
        this.distributionId = this.distributionId || "";
        this.fromColumnId = this.extColumnId || -1;
      }
      this.chainInfo = '';
      this.isChainProd = false;
      this.showReport = false;
      this.tabhBarFixed = false;
      this.cfg = JSON.parse(localStorage.getItem("cfg"))
      this.tabList = [{
        title: '详情',
        index: 0,
      }, {
        title: '目录',
        index: 1,
        smallText: ''
      }];
      this.typeBar = 0;
      this.currentIndex = 0;
      this.isShowShare = false;
      this.showIntegrate = false;
      this.isShowPresent = false;
      this.page = 1;
      this.is_page = false;
      this.couponPage = 1;
      this.couponIsPage = false;
      this.couponLoading = false;
      this.recRelateId = this.$route.query.recRelateId || '';
      this.recType = this.$route.query.recType || 0;
      this.playType = 0;
      this.pathFrom = "";
      this.showShareMoneyTip = true;
      this.showCourseList = false;
      this.showCoupon = false;
      this.couponList = [];
      this.showSearch = false;
      this.searchWord = "";
      this.showColumnList = false;
      this.showSearchColumn = false;
      this.columnCourseList = [];
      this.columnCoursePage = 1;
      this.columnIsPage = false;
      this.extColumnId = 0;
      this.nextLessons = null;
      this.prevLessons = null;
      this.isLoading = false;
      this.hasAlltime = false;
      this.audioPlayTime = 0;
      gettingCoupon = false;
      this.faStatus = 1;
      this.discountList = [];
      this.equityList = [];
      this.audioTitle = '';
      this.commentStatus = 0;
      this.showTryEnd = false;
      this.relatedList = [];
      this.showInt = true;
      this.longestTime = 0;
      this.showItemDetailIndex = -1;
      let localIntArr = localStorage.getItem("courseIntArr");
      if (localIntArr && JSON.parse(localIntArr).includes(this.courseId * 1)) {
        this.showInt = false;
      }
      playedDuration = 0; //某个音频累计播放时长
      startSt = 0;
      endSt = 0;
      this.showFormText = false;
      this.firstPosition = null;
      this.learningPosition = null;
      this.showItemDetail = false;
      this.showCombo = false;
      this.belongLoading = false;
      this.belongPackageList = [];
      this.belongColumnList = [];
      this.training = [];
      this.pagePackage = 1;
      this.pageColumn = 2;
      this.pageTraining = 2;
      this.searchWordDirType = '';
      this.ltAnswerId = 0;
      this.ltAnswerStatus = 0;
      this.isAnswererSelf = '';
      this.showSearchDirType = false;
      this.freeWatch = false;
      this.commentStatus = 0;
      this.courseListPage = 1;
      this.is_courseListPage = false;
      this.courseListLimit = 10;
      this.courseListLoading = false;
      this.showChoosePlayIndex = false;
      this.chooseToPlay = 1;
      this.qrImg = '';
      this.isSelectedVoice = false;
      this.showMarketingBuyBtn = false;
      this.timePercent = 0;
      this.playStatus = 0;
      this.showBottomPlayer = false;
      this.relateShowType = 0;
      this.hasExpired = false;
      this.popRelateCourse = false;
      lastScroll = 0;
      this.bottomBuyDirection = 1;
      this.timingPutOn = false;
      this.isOffSale = false;
      this.showFirstScroll = false;
      this.moveDirection = 0;
      this.showGpModal = false;
      this.scrollDirection = 0;
      this.popGift = false;
      this.popRelatesDatum = false;
      this.popType = 1;
      this.relateCollocation = [];
      this.courseListPagePrev = 1;
      this.is_courseListPagePrev = false;
      isFirstRequistList = true;
      this.isInitData = false;
      this.columnPermission = false;
      this.showPackageList = false;
      this.showLecturerModal = false;
      this.chainInfo = '';
      this.isChainProd = false;
      this.optimal = null;
      this.moreDeviceType = 1;
      utilJs.getChainInfo(this.cfrom.course, this.courseId).then(res => {
        this.chainInfo = res;
        this.isChainProd = this.chainInfo && this.chainInfo.isChainProd;
      });
      this.$store.commit("updateHasNoticeText", false);
      this.isRecommendPage();
      this.getVoiceDetail();
      this.judgeCompliance()
      // this.getDescptionDetail();
      // this.$nextTick(() => {
      //   if (!this.distributionId) {
      //     this.$refs.descriptions.getDescptionDetail();
      //   }
      // })
      this.buyedInfoSwiper()
      this.campDirectoryInitData()
    },
    colseModal(){
      this.showGpModal = false;
    },
    groupPurchasePay(selectNum) {
      this.clickBuyNow(false, selectNum);
    }
  },
  activated() {
    setDocumentTitle("音频详情");
    this.initData();
    window.removeEventListener("unload", this.cacheWatchTimeByClose, false);
    window.addEventListener("unload", this.cacheWatchTimeByClose, false);
  },
  deactivated() {
    window.removeEventListener("unload", this.cacheWatchTimeByClose, false);
    this.$store.commit("updateHasNoticeText", false);
    clearTimeout(previewTimmer);
    isFromPathColumn = false;
    this.$refs.gpModal.selectShopNum = 0;
    this.is_page_package = false;
    this.is_page_column = false;
    // this.$refs.abstractContent.style.height = "auto";
    window.removeEventListener("scroll", this.handleScroll);
    if (document.getElementById('scrollCourse')) {
      document.getElementById('scrollCourse').removeEventListener('scroll', this.handleScroll)
    }
    if (document.getElementById('scrollCourse1')) {
      document.getElementById('scrollCourse1').removeEventListener('scroll', this.handleScroll)
    }
    if (document.getElementById('relatedScroll') && this.relatedList.length > 5) {
      document.getElementById('relatedScroll').removeEventListener("scroll", this.handleRelatedScroll);
    }
    sessionStorage.removeItem(this.courseId + "rewardPoints");
    if (this.dataInfo.hasPermission == true && curPlayTime != 0 && startSt != 0) {
      if (curPlayTime > 2 && totalTime != 0) {
        let progress = Number(curPlayTime / totalTime).toFixed(2);
        endSt = new Date().getTime();
        playedDuration = Number(((endSt - startSt) / 1000).toFixed(0));
        this.setProgress(this.dataInfo.items[this.currentIndex].detailId, progress, playedDuration);
        this.isShareInt(playedDuration);
        startSt = 0;
        endSt = 0;
        playedDuration = 0;
      }
    }
    utilJs.sendDataToApp('appAudioDestroy')
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.btn-wrap > div:first-child {
  color: #ff8831;
  color: var(--mb7color);
  background-color: rgba(255, 99, 45, 0.1);
  background-color: var(--rgba10color);
  border-bottom-left-radius: 0.9rem;
  border-top-left-radius: 0.9rem;
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.btn-wrap > div:nth-child(2) {
  color: white;
  background-color: rgba(255, 99, 45, 0.5);
  background-color: var(--rgba50color);
  border-top: 1px solid #ff8831;
  border-top: 1px solid var(--mb7color);
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.btn-wrap > div:last-child {
  color: white;
  background-color: #ff8831;
  background-color: var(--mb7color);
  border-bottom-right-radius: 0.9rem;
  border-top-right-radius: 0.9rem;
  border: none;
  border-top: none;
  border-bottom: none;
}
.theme-market .btn-wrap > div:first-child {
  background-color: var(--rgba10MarketColor);
  border: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:nth-child(2) {
  background-color: var(--rgba50MarketColor);
  border-top: 1px solid var(--marketColor1);
  border-bottom: 1px solid var(--marketColor1);
  color: var(--marketColor1);
}
.theme-market .btn-wrap > div:last-child {
  background-image: -webkit-linear-gradient(0, var(--marketColor2) 0%, var(--marketColor1) 100%);
  color: #FFFFFF;
}
.getIntegration {
  position: absolute;
  right: 0rem;
  top: 0.1rem;
  width: 3.75rem;
  height: 1.25rem;
  line-height: 1.25rem;
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
  background: rgba(255, 255, 255, 1);
  opacity: 0.9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.qrbg {
  width: 100%;
  height: 6rem;
  margin-top: 0.4rem;
  background: url("../../../assets/i/wap/course/ad.jpg") no-repeat center 0;
  background-size: cover;
}
.qrbg > img {
  float: right;
}
.yqImg {
  width: 1rem;
  height: 0.8rem;
}
.closeBig >>> p > img,
.closeBig >>> section > img,
.closeBig >>> div > img,
.closeBig >>> img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.aCloseBig >>> p > a > img,
.aCloseBig >>> section > a > img,
.aCloseBig >>> div > a > img {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.bg-tag {
  background: rgba(0, 0, 0, 0.5);
}
.content-mask {
  margin-top: -2.2rem;
}
.audio-tip {
  background: rgba(34, 34, 34, 0.5);
}
.pop-more {
  border-left: 1px solid #f2f2f2;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  border-radius: 4px 0px 0px 4px;
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.08);
}
.course-item {
  border-radius: 4px;
  margin-right: 0.5rem;
  /* display: inline-block; */
}
.course-cur {
  color: #fc7033;
  background: rgba(255, 120, 0, 0.05);
  border: 1px solid rgba(255, 120, 0, 1);
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.08);
}
.course-other {
  color: #333;
  background: rgba(255, 255, 255, 1);
  border: 1px solid #f2f2f2;
}
.orange-fc {
  color: #fc7033;
}
.course-shadow {
  box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.08);
}
.course-inner {
  width: 6.5rem;
  height: 3rem;
  position: relative;
}
.c-ws-normal {
  white-space: normal;
}
.c-title-bg {
  background: #fafafa;
}
.search-bg {
  background: #f5f5f5;
}
.c-pr28 {
  padding-right: 0.7rem;
}
.c-hh400 {
  height: 10rem;
}
.c-hh520 {
  height: 13rem;
}
.c-bg-orange {
  background: #fc7033;
}
.try-look {
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  top: -0.35rem;
  left: 0;
}
.try-look2 {
  border-radius: 0.5rem 0.5rem 0.5rem 0;
  top: -0.35rem;
  left: 0.25rem;
}
.c-lock {
  left: 0.25rem;
  top: -0.5rem;
}
.c-lock2 {
  left: 0.5rem;
  top: -0.5rem;
}
.c-pv22 {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.coupon-left {
  background: url("../../../../public/i/wap/coupon/coupon_left.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.exchange-left {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.all-coupon-bg {
  background-color: #f4f7f9;
}
.bg-open {
  background: linear-gradient(
    0deg,
    rgba(220, 182, 82, 1),
    rgba(241, 211, 132, 1)
  );
}
.bg-sblack {
  background: #666;
}
.upgrade-fc {
  color: #f0d282;
}
.br-l8 {
  border-radius: 0.2rem 0 0 0.2rem;
}
.br-r8 {
  border-radius: 0 0.2rem 0.2rem 0;
}
.bg-look {
  background: linear-gradient(
    90deg,
    rgba(252, 112, 51, 1) 0%,
    rgba(252, 112, 51, 0.5) 100%
  );
}
.c-maxw330 {
  max-width: 8.25rem;
}
.c-maxw410 {
  max-width: 10.25rem;
}
.c-maxwp90 {
  max-width: 90%;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
.family-card-bg {
  background: url("../../../assets/i/wap/vip/familyCard.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-vip-bg {
  background: url("../../../assets/i/wap/recommend/VIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.equity-svip-bg {
  background: url("../../../assets/i/wap/recommend/SVIP.png");
  background-size: cover;
  padding-left: 3.45rem;
  padding-right: 0.35rem;
}
.dia-head-bg {
  padding-top: 5rem;
}
.dialog-mid {
  background: url("../../../assets/i/wap/recommend/recommend-present-mid.png")
    no-repeat;
  background-size: 100% 100%;
  padding-right: 0.4rem;
}
.coupon-mb1 {
  background: url("../../../../public/i/wap/vip/coupon-mb1.png");
  background-size: cover;
}
.exchange-left1 {
  background: url("../../../../public/i/wap/coupon/exchange.png") no-repeat 100%;
  background-size: 100% 100%;
}
.c-bg-A71 {
  background-color: #a0701c;
  opacity: 0.2;
  border-radius: 50%;
}
.bg-center-product {
  background: url("../../../../public/i/wap/course/center-product.png")
    no-repeat left top;
  background-size: 100% 100%;
}
.bg-upgrade {
  background: url("../../../../public/i/wap/course/upgradeBg.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.bg-upgrade-botton {
  background: #382f2d;
}
.bg-collage {
  background: url("../../../../public/i/wap/course/collageBg.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.bg-fa {
  background: url("../../../../public/i/wap/course/friendsHelpBg.png") no-repeat
    100%;
  background-size: 100% 100%;
}
.fc-benefit {
  color: #fc7033;
}
.arrow-left {
  top: 5px;
  left: -4px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #fff;
}
.sign {
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.sign1 {
  border-top-left-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
#scrollCourse1,
#scrollCourse {
  -webkit-overflow-scrolling: touch;
}
.camp-guide {
  background: url("../../../assets/i/wap/course/group_guidance_bg.png") no-repeat;
  background-size: 100% 100%;
}
.free-watch-bg {
  height: 15.5rem;
  background: url("../../../../public/i/wap/course/free_watch.png") no-repeat;;
  background-size: 100% 100%;
}
.c-mt240 {
  margin-top: 6rem;
}
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.pl-8 {
  left: -0.2rem;
}
.pt-15 {
  top: -0.375rem
}
.bg-lecturer {
  background-color: #F8F9FB;
}
.stop-animation > div {
  animation-play-state:paused!important;
  -webkit-animation-play-state:paused!important; /* Safari 和 Chrome */
}
.line-scale-pulse-out2 > div {
  height: 0.5rem;
  margin: 0 0.5px;
  width: 2px;
  border-radius: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
  animation: line-scale-pulse-out 0.9s -0.6s infinite cubic-bezier(0.85, 0.25, 0.37, 0.85);
}
.line-scale-pulse-out2 > div:nth-child(2),
.line-scale-pulse-out2 > div:nth-child(4) {
  -webkit-animation-delay: -0.4s !important;
  animation-delay: -0.4s !important;
}
.c-p-b88 {
  bottom: 2.2rem;
}
.p-t-10 {
  top: -0.25rem
}
.p-t-14 {
  top: -0.35rem
}
.p-t6{
  top:0.15rem;
}
.r-14 {
  right: -0.35rem;
}
.c-bd1-white {
  border: 1px solid #fff;
}
.translucent-white95
{
  background-color: rgba(255, 255, 255, 0.95);
}
.p-t-2 {
  top: -2px;
}
.p-r-1 {
  right: -1px;
}
.cover-rotate{
  -webkit-animation:coverRotate 20s infinite linear;
  animation:coverRotate 20s infinite linear;
}
.black-transition {
  opacity: 0.7;
  background: linear-gradient(180deg,rgba(0,0,0,0.00), #000000);
}
.hot-gradient-bg {
  background: linear-gradient(90deg,#ff3612, #ffbb4e);
}
.hot-price-fc {
  color: #FE9901;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter {
  filter: blur(3px);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -ms-backdrop-filter: blur(4px);
  -moz-backdrop-filter: blur(4px);
}
.backdropFilter2 {
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  -ms-backdrop-filter: blur(40px);
  -moz-backdrop-filter: blur(40px);
  transform: scale(4);
  -webkit-transform: scale(4);
}
.cover-img-wrap {
  border: 1px solid rgba(255,255,255,0.40);
}
.small-bottom-line:after{
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  border-bottom: 1px solid #e5e5e5;
  width: 100%;
  -webkit-transform: scale(1, 0.5);
  transform: scale(1, 0.5);
}
@-webkit-keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@keyframes line-scale-pulse-out {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
  50% {
    -webkit-transform: scaley(0.4);
    transform: scaley(0.4);
  }
  100% {
    -webkit-transform: scaley(1);
    transform: scaley(1);
  }
}
@-webkit-keyframes coverRotate {
  0%{
    -webkit-transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
  }
}
@keyframes coverRotate {
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
.moveRight {
  animation: move-right 0.15s linear;
  -webkit-animation: move-right 0.15s linear;
}
@-webkit-keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-right {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.moveLeft {
  animation: move-left 0.15s linear;
  -webkit-animation: move-left 0.15s linear;
}
@-webkit-keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes move-left {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.to-show-height{
  animation: showHeight 0.5s forwards;
}
.to-hide-height{
  animation: hideHeight 0.5s forwards;
}
@keyframes showHeight {
  from {
    height: 0;
  }
  to {
    height: 3rem;
  }
}
@keyframes hideHeight {
  from {
    height: 3rem;
  }
  to {
    height: 0;
  }
}
.fc-3F73F8 {
  color: #3F73F8;
}
.min-height101 {
  min-height: 101%;
}
.badge-bg {
  width: 100%;
  height: 2.9rem;
  background: url('../../../assets/i/wap/camp/badge-bg.png') no-repeat center center;
  background-size: contain;
}
.tabhBar {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 1.7rem;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 900;
}
.top1 {
  top: 1.7rem;
}
.top2 {
  top: 13rem;
}
.tab-bar-ios {
  width: 100%;
  max-width: 16rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  z-index: 9999;
}
.box-shadow-player {
  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.1);
}
.p-l-1 {
  left: -1px;
}
.wx-top1 {
  top: 11.3rem !important;
}
.gap-border {
  position: absolute;
  width: 1px;
  height: 1.6rem;
  right: -0.55rem;
  top: 1.15rem;
}
.gap-border-inner {
  width: 1px;
  height: 0.65rem;
  border-right: 1px solid #ccc;
}
</style>
